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INTRODUCTION TO THE BOOK 


This book contains the following modules 


1 Internet and Web Page Designing 
2 Logic Building With C 


The knowledge and information in this book is the result of a concerted effort of the Design 
Team, which is continuously striving to bring you the best and the latest in Information 
Technology. The process of Design has been a part of the ISO 9001 certification for Aptech 
- IT Division, Education Support Services. As a part of Aptech's quality drive, this team 
does extensive research and curriculum enrichment to keep it in line with the industry trends. 


We will be glad to receive your suggestions. Please send us your feedback, addressed to 
the Design Head at Aptech's Corporate Office, Mumbai. 


Design Team, H.O. New Jersey USA 
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INTRODUCTION TO THE MODULE 





a he Internet has turned the world into a global village. With the advent of the Internet (or 
_ the Net as it is popularly called), distances and geographic locations are no longer barriers 
to communication. 


Using the Net, it is possible to communicate across continents in the space of minutes: if 
not seconds. While earlier communications across the Net was primarily via email today 
there are interactive options available such as Chat. With chat it is possible to hold real time 
conversations with people across the globe. 


The World Wide Web is the most popularly used component of the Web. It enables us to 
present information to a worldwide audience using formatted text, graphics and a range of 
multi-media options like sound and movies. 


In this module, you will be introduced to the various components that make up the Net and 
also learn to design web pages using Hyper Text Markup Language — HTML 


Design Team, H.O. New Jersey USA 
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SESSION OBJECTIVES 
At the end of this session, the student will be able to - 


. » Discuss what is the Internet 

 @» Explain the Origin of the Internet 
we Explain Client Server Basics 
» Describe electronic mail 
» Explain Telnet 
we Discuss FTP 

_ ‘ Explain Archie aati 
«» Discuss Gopher, Jughead and Veronica 
we Explain WAIS 
we Discuss the World Wide Web : 
i Explain Search Engines _ 
- Discuss HTML 


™ gw 
SAS aw 


1.1 Introduction to the Internet 


“How is it possible that a person sitting in India can send a letter to 
America and get a reply within a few minutes?” It is possible because 
of the phenomenon called the Internet./With the Internet and its 
supporting networks, the world is a local phone call ey) 
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(A network is two or more computers connected together which 
enables them to communicate and share data. The larger the network, 
the more facilities it has to offer. 


‘The Internet is the world's largest computer network.) The Internet or 
the Net is a network of networks, all freely exchanging information. It 
is also referred to as the Information Superhighway. 


The Net has many uses like : 

=» Communication across continents through a local phone call. 
we Access to information of any kind and for any p&érpose. 

» Having discussions on any topic. 

1.2 Origin of the Internet 


lin the year 1969, the Department of Defence (DOD), U.S.A, built a 
network called ARPANET./ ARPA stands for Advanced Research 
Projects Agency. The idea behind ARPANET was to enable sharing 
of data between various government-funded research centres. The 
centres included businesses and universities that were equipped with 
the latest computer technology at that time. 


‘ The ARPANET started with just four computers on the network, It 
connected University of California at Los Angeles, University of 
California at Santa Barbara, Stanford University (also in California), 
and the University of Utah in Salt Lake City. 


ARPANET became so popular that all the universities in the country 
wanted to join it. To meet the demand, ARPANET was converted into : 


» MILNET, which was only for the military sites 
ws The new, smaller ARPANET, which had the non-military sites. 


By 1972, there were 40 different sites attached to ARPANET. A few 
years later, in 1980, another network called the Computer Science 
Research Network (CSNET) was linked to the ARPANET. The CSNET 
was created to connect several independent networks. This was the 
birth of the Internet. 


in the latter half of 1960, the National Science Foundation also built 
its own network called NSFNET which was also linked to the other 
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two main networks. It was a powerful network in terms of speed as it 
was used to connect the super computer centres of the NSF. 


As networking technology developed, new networks were being 
formed which were all linked to the ARPANET, CSNET and the 
NSFNET. All these networks connected together came to be known 
as the Internet. Eventually the ARPANET and the CSNEFT closed 
down and NSFNET, being a better network, became the main network 
linking the other networks on-the Internet. 


1.3 Client-Server basics 

The computers connected to the Internet : 

we Use different hardware and software 

we Exchange large volumes of data 

we» Require speedy exchange of data 

» Need to have secure systems to prevent unauthorised access 


The Internet is based on the client-server concept that takes care of 
the above needs. 


A client-server application exists over a network : 


we The server is a computer, which holds the data that can be 
accessed by other computers on a network. The server runs the 
server program. 


w» The client is a computer that accesses the data from the server. 
The client runs the client program. 


1.4 Electronic mail (Email ) 


Electronic mail is one of the most popular facility of the Internet. People 
can send and receive messages (referred to as mail) within a few 
minutes across continents. It can be used for business and personal 
correspondence and exchange of information: Any type of computer 
(using different hardware and software) on the Internet can send 
and receive mail. / 
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1.4.1 How Does Email Work? 


Just like normal mail, addresses are required for the exchange of 
email. Every person who wishes to receive email must have an email 


address. 


At the heart of the email service is the email service provider. This is 
an organisation that maintains(a computer capable of sending and 
receiving email. This computer is referred to as the email server. 


a 


When a user applies for an email address, an account is created for 
him on the email server. The name of his account is referred to as his 
email address. All mail addressed to the user is received into this 
account. Email accounts are password protected, thus preventing 
other users from accessing the mail. 


- 1.4.2 Email Address 


When the user applies for email facility, the email service provider 
creates an account for the user and assigns the user a unique email 
address. All email addressed to this email address will be saved into 
the user's account and can be accessed by the user as and when 
required. 


The email address is of the format : 
UserName@DomainName 
=» The user name is the identity of the user whose account it is. 


=» The “@” symbol separates the user name and the domain name. 
It is pronounced as “at”. 


we Every email server is given a unique name. This is referred to as 
the domain name. 


For example: john@aol.com 
» john is the identity of the user 


The user name can be any name that is specified by the user at 
the time of supplying details for getting an email account. 


we aol.com is the domain name. 
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Domain names have two components. The name of the 
organisation followed by the type of the organisation. Thus, ‘aol’ is 
the name of the organisation while ‘com’ is the type of organisation. 
‘com’ is an abbreviation for commercial. 


Examples of other types of organisations are ‘edu’ for educational 
Site, ‘gov’ for government site or ‘mil’ for a military site. 


The above address is the example of a user registered with an U.S. 
email service provider. For users registered with email service 
Providers in countries other than the U.S., a 2 character code 
representing the country where the email server is based, is attached 
to the email address. For example: queen@fsa.com.ca. 


=» queen is the user identity 

=» fsa is domain name 

= com indicates that it is a commercial enterprise 
“> ca stands for Canada 

1.4.3. Email Clients 


There are special mail programs available to compose, receive and 
send mail. They are referred to as email clients as they reside on the 
user's computer and are used to communicate with the email server. 


Email clients also provide various other facilities like maintaining an 
address book of email addresses that make emailing very simple. 


Some of the popular email programs are Eudora, Pine and Outlook 
Express. 


1.5 Telnet 
gp 


Telnet is a program that allows the user to log into another computer 
on the Internet as a user on that system. With Telnet, a user can log 
into a server to access information stored on it. However, only those 
users that have been allowed access by the organisation can login to 
the servers. 


Organisations make use of the Telnet to make a part of their system 
available to outsiders. 
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ee FS) File Transfer Protocol (FTP) 


(Protocols are rules or standards that are followed by computers to 
communicate with each other on a network. /They are a set of 
conventions or standards followed by the industry. 


Transferring data in the form of files is one of the most common uses 
of the Internet. 


File Transfer Protocol or FTP is one of the most popular methods 
used for file transfers through the Internet. The reason for its popularity 
is that it has the capability to transfer files between different types of 
computers for eg. IBM-compatible computers using different operating 
systems like Windows, OS/2, Unix and Macintosh computers. 


Computers that store information that can be accessed via FTP are 
called FTP servers.\Some FTP servers store files that can be 
accessed by anybody. These servers are called anonymous servers. ) 
Other FTP servers require a specific user name and password to 
login. 


1.7 Archie 


There are many FTP servers on the Internet which contain an 
enormous amount of information. A user would have to login to 
different servers one by one to check for the required files. Thus, 
finding the server that holds the required files is a difficult and tedious 


task. 


To make this task easier Archie is used. It consists of Archie client 
and servel, An Archie server is a database of anonymous FTP servers. 
It holds the names of the FTP sites and the files on these sites. Thus, 
rather than login at each FTP site and determine whether it has the 
required file, one can simply look up an Archie site to see the files 


present on a particular FTP site. ) 
1.7.1. Using Archie 


There are three ways to access the Archie server : 


we Through the Archie client program 
An Archie client is a program that the user runs from his computer 
to search the Archie database for a server with the required file. 
The user gives commands to the Archie server via the Archie 
client program. The client program will communicate with the Archie 
server and will retrieve the information. 
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» Through Telnet 
An Archie server can be logged into using Telnet too. 


» Through e-mail 


An Archie server can be searched by sending it email with the 
search commands in the mail message body. The server sends 
the search results back via email message. 


1.8 Gopher 

er ee ee 
Gopher provides a menu based system that can be used to access 
the required information.’Gopher servers maintain information 


Classified under categories. These categories can have further sub 
categories. 


To locate information we select the appropriate categories just like 
we would access files in a folder. 


(The biggest advantage of Gophers is that they display information in 
the form of a menu 1.) The user clicks on the required option to access 
the information. 


(Gopher servers are often collectively referred to as Gopherspace,) 


1.8.1. Jughead and Veronica 


With the increase in the number of Gopher servers, it was becoming 
difficult to reach the specific information through the menus. The user 
had to go through many menus before any relevant information could 
be found. Thus, a need for indexing arose. 


An indexing mechanism allows the user to specify the keywords and 
the documents containing the keywords are shown. For example, a 
search on a keyword like ‘health’ would bring up all the documents 
that contained the word ‘health’. 


Gughead and Veronica were two indexing systems that were developed 
to simply looking for information using Gopher.) . 


Jughead stands for Jonzy’s Universal Gopher Hierarchy Excavation 
and Display. It was created to index the Gopher menu items (or 
directories). 


Veronica stands for Very easy Rodent Oriented Netwide Index to 
Computerised Archives. Veronica looks for the keywords in the titles 
of menu items in Gopher. 
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It is not difficult for a new user to use Veronica. However, it also has 
many more options for the advanced user. It allows the user to restrict 
or advance the search of Gopher menu titles. It also allows logical 
query operators (AND, OR, NOT) for advanced searches. 


1.9 WAIS 





WAIS stands for Wide Area Information Servers, (pronounced ‘ways’) 
and is a system in which specialised subject databases are created 
at multiple server locations. A directory of servers at one location 
keeps track of all the servers and the databases on them. 


The WAIS servers store databases that contain information about 
where to look for specific information. The WAIS servers help in looking 
for the right database that may contain the required information and 
also provides access to it. WAIS searches for keywords through the 
contents of the documents rather than just at the titles of the 


documents. 


WAIS is a very useful tool for finding relevant information from other 
databases on the Internet. These databases are called sources in 


WAIS terminology. 

WAIS servers can be accessed in the following ways : 
> Through Telnet 

w Through a WAIS client program 

@» Through Gopher 

1.10 | World Wide Web (WWW) 


Rapid developments in the field of multimedia created a need to exploit 
its benefits on the Internet. 


The World Wide Web (WWW) or the Web is a system that has made 
it possible to access almost any document on the net, including sound, 
pictures, video. It has also made looking for information easy and 


fast. 


On the WWW, information is displayed in the form of Web Pages. 
The Web Pages can hold : 


we Formatted text 
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= Pictures 
= Audio 
we Video 
This makes the information attractive and easy to use. 
Web pages also contain hyperlinks. Hyperlinks are text or other 
objects that are linked to other pages that hold related information. 
Text that is hyperlinked to another document is underlined and 
pictures that are hyperlinked may be heavily outlined. To move from 
one page to another, the user has to simply click on the link. 
For example : 
Figure 1 displays the Web page of CNET.com, a popular website. 
The text in the first column is hyperlinked to documents containing 
information on computer hardware, computer games, software to 
download (copy from the Internet to your computer) etc. The page 
also provides a link to information on Web browsers. Clicking on the 
link “Better browsing” will display Figure 2. 
eS ae ee ee ae : 
| Ele Ect Yew Go” Favowes Hep "= AG OS ae 
[-: = OD GG 45098 H46m-x% 
JAddess @) hip //cnet com/ _ se A 
SEU RS Tra ai 4 Thursday. February 25 
Special Reports | ; 
Ne &l . Better - : ADVERTISEMENT 
Downloads oss ' das ¥ 
Hardware oe . 
ener fo + @ 
di , | | j 
Iv | CNET's quidetoWeb { Digitalimaging | i, 
muni browsers essentials | a" 
cia ‘Topic Finder 2SRGt stories 
nO: Yecinesione is edwithnews ting” P&-Makers deal with ID 
ris cee ee a 
ROVER ME 1 [PF a » Will Rarthlink 
Pick onel mes apie advertising dive eBay — i” 
ej [A> Seca Ge BS 
Figure 1 
9 


Scanned by CamScanner 


-< 


Near reo 


Concepts 























fete ca Yor Ge rate Heb eg ca 

J 7 <4: i J 
le: 27eb Gd) anges 266g..." fk ae) 
| fAddress €) hip //cnet com/Content Reports Special/Bic rides Vstentd ger ap + Punks | 


Browsers | 4 


{ $A CNET Topir Th ENET Topir Center ’ 
corees 


ADVERTISEMENT | Looking for 
Get bresting news 


© find you permet FC 
é -esoansanaate | browsers? bout new browsers 
= 7h | Sure, youve already got a Web browser- but do | 
| you have the right browse: for your needs? | 


| Whether you want the latest and greatest eynaninn 
| browser ora bare-bones alternatre the! wonYtax | = | 





Your emeil here 










eet ° your ©. .tem, find it right here 
* Brows er talk 

a Pe aided 

© EDS names new 





CNET Message Boards 
Microsoft 
é yy Netscape 
; : Internet 
Communicator 
Explorer 
: ? NYRI TE Oe Pat 









financral chief 











Figure 2 


1.10.1 Browsers 


~ 


(A browser is the software that is used to view Web pages. ) . 


Browsers are of two types : 


we Text based browsers 
These browsers only show textual information. They are not 


equipped to show graphics, movies and sounds. However, they 
make it easy to pick and follow links by selecting the appropriate 


highlighted text. For example : : Lynx. 


we Graphical browsers 
All graphical Web browsers allow the user to just point and click 


to access information. They have the capability to support 
hypermedia i.e. sounds, movies, formatted text and graphics. The 
most popular graphical browsers are : 


w Netscape Navigator 
we Internet Explorer 


we Mosaic 


Browsers allow the user to specify the location of the web page to be 
viewed. Clicking on links opens the specified page in the browser. 
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1.10.2 Web Servers and Addresses 


Web pages must be accessible to all on the Internet and are stored 
on special computers called as Web servers. Each web server is 
assigned a unique address of the format : 


www.nameofsite.typeofsite.countrycode 


Typically, web addresses start with ‘www’. The 'nameofsite’ is the 
name of the organisation or person whose page we are trying to 
access. ‘Type of site’ is a three character code indicating the nature 
of work. For example, ‘com’ stands commercial organisations, ‘edu’ 
stands for educational and ‘org’ for non-commercial organisations. 


‘countrycode’ is a two character code indicating the country in which 
the web server is located. For example, ‘il’ is for Ireland, ‘de’ for 
Germany and ‘gu’ for Guam. 


The site address is also referred to as the URL or the Uniform 
Resource Locator. 


Web servers based in US do not need the country code. 


Figure 3 shows the home page of the company Microsoft as viewed 
in the browser Microsoft Internet Explorer. 


PCE ere an = 
| Fle Edt View Go Favorites Help 


ie] x! 


aE a 


aie Sep ee ang® aad 


2] hip / 


Addess 





ume microsolt com/ 


web aveciry | micresohteom [hep | 





msn.com home 


Autos 








quick links Aut Tickets Downloads Get Online Sports Scores 
Buyer's Guide Buy Books E-cards Maps TV Listings 
Computing Buy Music Ema Mowe Times — White Pages 
Entertainment Chat Encyclopedia Stock Quotes ‘Leltow Panes 
Games mtn — = 
Love Month a. Get news, ie uibear: and other information for your local area. 
MSN Insider lick here for areas 

Click he as outside 
News Type aUS zipcode | Fenies| 
Personal Finance : the US 
Real Estate ——_——_ 
Shopping See eee 
aa men notmail Logon Name Hotmail Password 
Travel ent | 
We Communities | Get Hotmail, free e-mail you can use from any PC with 
Web Events Internet access 
Women 
msenbeo news 1d | ather for tn funeral 

Home Pe Wold leaders gather for Hussein funeral 
Seapine oe picharnn Jordan The challenges ahea 

e) "| Mm, [ Tt fa intemnet zone. 


Figure 3 
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we The bar below the menu bar is called the navigation tool bar. It 
contains buttons for navigation on the World Wide Web 


we The URL of the home page appears In the list box with the caption 
Address. It is below the navigation bar. 


we The text that is underlined 's hyperlinked to other documents that 
contain related information. Clicking on any of these will open the 


associated page. 


1.11 Search Engines 

Even though the World Wide Web simplifies accessing information, 
its vastness makes tt a little difficult to find the relevant information 
quickly. To make searching easier. search engines were developed. 


Search engines are software on the Web that help the user to look 
for specific information. They search for information on the Web on 
the basis of certain keywords specified by the user. The result of the 
search is a list of documents that contain the keywords. 


However, the list could be a long one and could include more than 
fifty documents. To narrow down the search, there are several options 


that can be applied. 


Consider the case where information on public health services is 
required. 


we Type in “public health services” with the quotes. This will ensure 
that documents that contain the phrase “public health services” 


are given priority. 


w A search using +“public health services” will ensure that only 
documents that contain the exact phrase “public health services” 
will be retrieved. Using the + in front of a word or phrase during 
search implies that the word or phrase must be present in the 
document being retrieved. 


we If the search string is +"public health"—service then, only documents 
that contain the phrase “public health” are retrieved The use of the 
_ indicates that documents that contain the word service must be 


omitted. 
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Some of the popular search engines on the Web are : 
=» Yahoo — www.yahoo.com 

w Altavista — www.altavista.digital.com 

we Infoseek — www.infoseek.com 

we Excite -www.excite.com 

we WebCrawler — www.webcrawler.com 


Figure 4 displays the screen of Yahoo! one of the most popular search 
engines. 


Be Yahoo! Advanced Search Options - Mictosolt Internet Explores BOE 
| file Edt View Go Favonies . Help : Shee ca 
ie -ODA Q@HGR’ aaed eaeoe 

| Address |] hitp //:earch yahoo com/seaich/options 7} |Links 


Advanced Search Options 





[Sich | netp 


© Yahoo! © Usenet 


Select a search method Select a search area 
© Intelligent default © Yahoo Categones 
© An exact phrase match C Web Sites 
C Vatches on all words (AND) 
C Matches on any word (OR) 


Find only new hstungs added dunng the past [3 years 7] 


After the Grst result page. display [20 — per page 2 


j who ji. . 0.. (@Bitremet zone” 


c 


Figure 4 


Search engines usually refer to the programs that are used to search 
for data on the World Wide Web. Programs like WAIS and Gopher 
are also search engines. They are used to seafch for data in databases 


across the Internet. __ 





The advancements in the Web are leading to the merging of the lines of 
difference between the search engines on the Web and the Internet. For 
example, Yahoo, a Web search engine gives the user an option to search 
for data in newsgroups such as Usenet (a network of mail servers created 
to enable exchange of information between groups with common 
interests), which is a part of the Internet but not of the Web. 


Concepts 
~- 1 ‘ 


13 


Scanned by CamScanner 


14 


Internet and Web Page Designing 


1.12 introduction to HTML 


Text processing and word processing systems have information to 
describe how the text of the document is to be displayed. This 


information is called markup. 


In 1980, a mark up language was developed to crecte documents 
that could be displayed consistenily ON Cuinpulers USI" ; dnterent 
hardware and operating systems. It wo* called tre Standard 
Generalized Markup Language or SGML.) 


SGML is a general-purpose tool to descr’). icv vents ch ivy kind 
SGML documents are not restricted to a sitg)@ optic at on. formattin ’ 
style, or processing system. 


HTML or Hyper Text Markup Language is defined using the Standard 
Generalized Markup Language. It is a way of incorporating text, 
graphics, sounds and videos all in one document called a Web page. 


These documents can be displayed using Web browsers. It provides 
links to other resources using hyperlinks. It also has the capability to 
work with other Internet protocols and services on the Web like FTP, 
Gopher, Usenet, e-mail, WAIS, Telnet and HTTP. 


HTML is based on two concepts : 


we Hypertext : 
It provides a way to create a link between information in the same 


document as well as in different documents. 


we Markup language : 
Mark up refers to the special tags that are a part of the HTML 
document. These tags specify how the document content should 


be displayed. 
1.12.1 Benefits of HTML 


> HTML is a simple but powerful language to use. The simplicity of 
HTML allows anyone to create Web pages. 


we» The Web pages can be linked together using links and Uniform 
Resource Locators. Thus a user has to just click on hyperlinks to 
get access to related information. 


we Using URLs it is even possible to link to documents through Telnet, 
WAIS, Gopher, FTP, Usenet newsgroups, or even email. 
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* HTML also allows for the incorporation of multimedia files in the 
HTML docurents. If tiie browser has the capability to play the 
sound or movie fi'2s then the user can view them just by clicking 
cn them. 


1.12 2 Structure of an HTM'. dccument 





Every HTML document should have the following structure : 


w A read: 
HTML includes a pai: of tags, <HFAD> and </HEAD> to identify 
the head of a doc ument. !iany br wsers don't require this tag, but 
for readability and struc:.: 9, it is better to use it. 


The head contains the opening <HTML> tag. Every HTML 
document must have this tag as the first line and the closing tag </ 
HTML> as the last line. These tags identify the document as an 
HTML document to the browser. 


The opening <TITLE> and closing </TITLE> tags also appear in 
the head of the document. The text between the title tags appears 
in the title bar of the browser's window. 


we A body : 
The body of an HTML document contains the text that will show 
up on the Web page. It also contains all the links to other information 
that is related to the page. Majority of HTML tags occurs within a 
document's body. 


lhe body section is enclosed within <BODY> and </BODY> tags. 
It has a description of the document's layout and structure. A 
variety of tags for text headings, embedded graphics, text 
paragraphs, lists, and other elements are used. 


Refer to Figure 5 for the structure of an HTML document. 


<HTML> 

<HEAD> 

<TITLE>My first HTML document</TITLE> 
<H1°This is the heading of my document</HbD 
</HEAD> 


<BODY> 

<P>Learn HTML fast and easy</P> 
<P>My first Web page</P> 
</BODY> 

</HTML> 





Figure 5 
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The output of the above code is displayed in Figure 6. 
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This is the heading of my document 





Leam HTML fast and easy 


My first Web page 

4 
hn ik — aT , (el MoCanuia "a LPP Ee Le Re ae eee 
1€ ] Done | PPT | 23 My Computer : i 


Figure 6 


HTML files include both control information (tags) and content (text), 
which together describe the appearance and contents of Web pages. 


An example of a tag : 


<B>My Personal Home Page</B>. 


<B> and </B> are the opening and closing tags that will display the 
text ‘My Personal Home Page’ in bold on a Web page. 


The following syntax should be kept in mind while writing HTML 
documents : 


=» Each tag is enclosed in a <(left bracket) and > (right bracket). 
These special characters are what differentiate the tags from 
ordinary text. 


» There is an opening and closing tag name for each tag. 


» Opening is denoted by <>, for example, <I>: 
This is the opening tag to display text in Italics. 
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= Closing tag is denoted by </>, for example, </I>: 
This is the closing Italics tag. 


» Closing tags may not be required for some of the tags. But it is 
better to write closing tags for all. 


» Tag names are not case sensitive but generally they are written in 
uppercase so as to distinguish them from the normal text. 


= Tags can have attributes which have values, for example: 
“align=center” where align is an attribute and its value is centre. 
This attribute can be used to align text in the centre of a page. 


we The “&" can be used to display special characters. 


Sometimes it is necessary to insert one set of markup tags within 
another to get the required display result. 


(t Enclosing one markup in another is called rst . 


Scanned by CamScanner 


Internet and Web Page Designing 





The Session In Brief : 

we The Internet or the net is a network of networks, all freely 
exchanging information. It is also referred to as the Information 
Superhighway. 

= The Internet originally started off as a network called the 


ARPANET, a project started by the Department of Defence 
(DOD), U.S.A, in 1969. 


we The Internet has many componer.s. Some 2f these are : 


OO Email 
O FTP 
oO WWW 
_ © Gopher 
OWAIS - 
0 Archie 
Oo Jughead 
0 Veronica 
_ 0 Telnet 
we World Wide Web (WWW) or the Web is a system that allows 
users to have access to almost any document that is on the 


Internet. It could be sound recording, or video image. It has 
made looking for information fast, powerful and easy. 


te A browser is the software used to access the Web. The most 
; popular browsers are Netscape Navigator, Internet Explorer, 
.~ Mosaic and Lynx. 


» Search engines are software on the Web that help the user to 
look for specific information. All that is required is to type in key 
words, and the search engine will show a list of the documents 
that contain the words. 


we HyperText Markup Language or HTML is a way of representing 
text and linking that text to other kind of resources like sound 
files, graphics files, multimedia files. 
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An +. server is a database of anonymous FTP 
servers. 


Software used for viewing web pages is called Aras sey. - 


The site address is also referredtoasthe Uy - 
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SESSION OBJECTIVES 

At the end of this session, the student will be able to - 
we Explain TCP/IP fundamentals 

we Explain the usage of tables in htm! documents 

we Discuss applets and their usage in htm! documents 


=» Discuss the uses of the internet with special focus on 
e-commerce, on-line supermarkets, universities and on-line 
courses. 


2.1 TCP/IP — An Overview 





TCP/IP stands for Transmission Control Protocol and Internet 
Protocol. Computers connected to the Internet use these protocols 
to communicate with each other. Basically, they define how computer 
networks on the Internet exchange messages or data. 


The TCP/IP suite of protocols was developed by Vinton Cerf and 
Robert Kahn in 1974. 


2.1.1 Transmitting Messages 
Every node (computer) on the Internet has an address made up of 
four numbers. Each number should be less than 256. For example, 


202.54.1.1 {Each machine has a unique address on the entire Internet. { 


To send a message from one computer to another, we need to specify 
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the address of the destination computer. Also, if the message is long 
it is broken up into multiple packets and each packet is sent 
individually and the whole message is reassembled at the receiving 


end. 


Also on the Internet are routers whose job is to send data along 
different paths so that it may reach its destination. 


At the receiving end, the different packets are put together to form 
the complete message. 


The process of sending across a message using TCP/IP is described 
below : 


« The Transmission Control Protocol takes care of dividing the 
messages into packets. A packet is an electronic envelope which 


contains : 
C0 The address of the source and the destination machine. 
C0 Information about the size of the packet. 


0 Information about where it fits in the series of packets that make 
up a large message. 


«> The Internet Protocol addresses these packets and then mails 
them. 


“ The packet will be received by the computers called routers. 
Routers will then pass it on to other routers. 


0 The path travelled by the packet may not be the shortest 
possible one. 


- All packets need not foliow the same path. 


we At each point, an attempt is made to locate the destination 
computer. 


we Finally, the packets will reach their destination computer and not 
necessarily in the sequential order. 


we While receiving, the IP recelves the packets and gives them to 
TCP. 


=» TCP confirms that all the packets have been received. 


we Finally it puts the packets together again. 
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2.2 Tables 
te te ee 


Tables are used for arranging the layout of a Web page. The contents 
on the page look organised with the use of tables, which adds to its 
visual appeal. Most of the latest browsers support the use of tables. 


2.2.1 Basic table tags 


Figure 1 is an example of a simple table 





3 CNET.com - LT abahi FY ula La Center - Microsoft Internet Explorer 


i Be. Ea, Gow 


Lew SOU ane ASGm 


J Adebess | JE) hp Meret et com/Content/Reports/S pecial/B om: er: /inde> rtralt cn td ger, gp 


--Bréwsers 





















VQue=== szuasaq =A CNET Topic Center pe- saare A 
sovertisement | Looking for 
© Eind your pertect PC browsers? Get breaking news 


about new browsers 
© Save on sofpusre 
ate Sure, youVe already go! a Web browser--but do 


you have the right browser for your needs? frour email here 


Whether you want the latest and greatest r 
browser or a bare-bones allernatrve that wont tax 
From the CNET netwot te . 
your system, find it right here 
* Browser talk . 
CNET Message Boards M 
* IE Help Center Ng Netscape eeibenng * EOS names new 
CNET Help Communicator 
since ve Hhous Explorer 
fe}, eat FES 2 SS Bad Gk 1 inert core 
Figure 1 


= It has 4 cells arranged as two columns and two rows (cell 1, 2, 3, 4). 


we It also has a border. 


The code for the table is as follows : 
<table border="1"> 
<tr> 
<td>CELL 1</td> 
<td>CELL 2</td> 
</tr> 
<tr> 
<td>CELL 3</td> . 
<td>CELL 4</td> 
</tr> 
</table> 


‘Concepts - 
ay?s2 
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The tags used in the above code are explained below : 


we <TABLE>... </TABLE> 
All the table tags are enclosed between these two tags. Other 
table tags such as <TR>...</TR> and <TD>...</TD> will be 
ignored by the browsers if they are not contained with 
<TABLE>...</TABLE> tags. 


Concepts 
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The table tag can have the following attributes : 


O ALIGN 
Specifies the alignment of the table in the page. Valid options 


are “LEFT”, “RIGHT” and “CENTER". 


oO BORDER 
Specifies the width of the border to be drawn around all table 


cells. By default, there is no border drawn. 


© CELL PADDING 
The space between the content and inside edge of a cell. 


0 CELL SPACING 
The amount of space between cells in a table. 


OC) WIDTH 
Used to specify the width of the table. 


For example : 


<TABLE BORDER = 5 CELL PADDING = 4> 


</TABLE> 


will create a table with border thickness as 5 and a distance 4 
between the text and cell border. 


we <TR>...</TR> 
This stands for table row. To add a row in a table, the table row 
tags are used. For each row there will be a set of table row tags. 
The properties of each row are defined within the row tags. 


we <TD>...</TD> 


This stands for table data. The table data tags define each cell in 
the table. They must be nested within the table row tags. 


Scanned by CamScanner 


More on Internet and HTML 


Each row can have different number of cells. Short rows are 
Padded with blank cells on the right. A cell can contain any HTML 
tag normally used in the body of an HTML document. 


Some table data attributes are : 


7 ALIGN 
The horizontal alignment of the text within the cell. 


1 COLSPAN 


Width of the cell in terms of number of columns. Used when a 
cell occupies more than one column. 


J ROWSPAN 


Height of the cell in terms of number of rows. Used when a cell 
occupies more than one row. 


2.2.2 Table Captions and Headers 


Tables can be given a caption and designated to have a header row. 
In Figure 2 shown below, ‘Movies Now Showing’ is the caption and 
the first row has been designated the header row containing ‘Theatre 
1’, ‘Theatre 2’ and ‘Theatre 3’. 





Mowes Now Shownng 


Theatre 1 Theatre 2 | Theatre 3. 
Terrunator Aladdin i seseecteccss 


Top Gun Coca Home Alone 





” 
———— 


Z| 
ee Of ce Se oa. ee a 


rr nee ee | 


Figure 2 
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The HTML code for the table in Figure 2 is : 


<table border="5''> 
<caption align="top">Movies Now Showing</caption> 
<tr> 
<th>Theatre 1</th> 
<th>Theatre 2</th> 
<th>Theatre 3</th> 
</tr> 
<tr> 
<td>Terminator</td> 
<td>Aladdin</td> 
<td>————————_</td> 
</tr> 
<tr> 
<td>Top Gun</td> 
<td>———_———_</td> 
<td>Home Alone</td> 
</tr> 
</table> 


Concepts 
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The tags used are : 


we <CAPTION>...</CAPTION> 

This represents the caption for a table. <CAPTION> elements should 
appear inside the <TABLE> but not inside table rows or cells. Captions 
are always horizontally centred with respect to the table, and they 
may have their lines wrapped to fit within the width of the table. 


Attribute for the tag is : 
Oo ALIGN 
Specifies the location of the caption. Valid options are “TOP” 
and “BOTTOM” 
we <TH>...</TH> 
These tags are used to designate a cell as a header cell and are 
_to be used from within the <TR>...</TR> tags. 
2.3 Applets 
Consider two advertisements seen in a movie theatre : 


» One with dynamic images and movie/sound clips. 


we The other plain, static slides 
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Predictably, the former advertisement would be much more 
appreciated because of its greater visual appeal. 


The World Wide Web too, is a global marketing medium. Dynamic 
images, flashing/scrolling text and animation would leave a greater 
visual impact on its audience than static text and images 


A Web page designed using HTML is a static page. Thus the 
information presented on it is constant. One way to prepare dynamic 
HTML pages is using Java Applets 


2.3.1 What is a Java Applet? 
A Java Applet ts : 
we A program written in the Java programming larguage. 
we It can be embedded in an HTML page. 
we It has to be executed from within a Web browser. 


Java applets do not become a part of the HTML files. They are stored 
separately in another file. A link is maintained between the two files. 


At the time of loading of the Web page, the applet is loaded onto the 
local machine and run by the browser. The applet then performs the 
task it is required to do. 


However, there are a few restrictions on the applets : 
we Applets cannot read or write files on the local machine. 


we They cannot communicate with any server except the one on which 
they reside. 


we They are not allowed to execute any applications on the local 
machine. 


These restrictions make sure that the applets cannot cause any 
damage to the files on the local machine. 


es 
i 
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2.3.2 The Tag <APPLET>...</APPLET> 


The <APPLET> tag is used to include Java applets in HTML 
documents. It is used as shown below : 


<APPLET CODE="MyApplet.class’ WIDTH=100 
HEIGHT=140></APPLET> 


The attribute CODE specifies the name of the Applet's file. 
*MyApplet.class”. The attributes WIDTH’ and HEIGHT are used to 


define the Applet's display area 
Applet files have a ‘.class’ extension 


In some cases the Applet has parameters that can be used to 
customise its look or behaviour Values are passed to the parameters 
using the tag PARAM. which is used as shown below : 


<APPLET CODE="MyApplet.class” WIDTH=225 HEIGHT=50> 
<PARAM NAME="Text” VALUE="I am an Applet’> 
</APPLET> 


The applet MyApplet.class displays dancing text For this applet. we 
use the parameter Text to specify the text to be displayed in the applet. 


For the output of the above code refer to Ficure 3. 





ZY Nervous Text - Microsolt Crore I ee ee Cen ere 
| Eile fot vi F 0 

J le iew Qo Favortes mere Ea 
le-- -9@DG G@OG"8 BA4 


[Address [@] C ‘tervoucT ext\arcuer s nti 








2 ] Opening page te nm £3 My Computer 


Figure 3 
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The tag PARAM has two attributes : 


=> NAME 
Used to specify the parameter. 


ore 
| Concepts |‘ 


> VALUE 
The value to be assigned to the specified parameter. 


2.4 Internet Usage 


When it first started, the ARPANET (from where the Internet began) 
connected only four sites, and only a few hundred people had access 
to it. Each of the four sites had it's own local network. Presently, the 
Internet has grown to more than 10,000 networks from the original 
four. 


The Internet has some base networks supporting it. Earlier, the 
ARPANET was the one of its main networks. Today, several networks 
form its base. One of the most important is the NSFNET. These main 
networks provide reliable and high speed data transfer. 


By 1972, there were 40 different sites attached to the ARPANET. The 
ARPANET was started for the purpose of sharing data. The traffic 
between its sites included small text files sent between individual 
users. 


The Internet's phenomenal growth has made it a global marketing 
medium and a commercial business area. Communications 
companies, telephone companies, and cable television firms, and 
corporates, all want to be a part of the Internet phenomenon. 


Currently the Internet is being used : 
we For emailing 
=» For exchange of data and information 


As a forum for discussions, exchanging information and news 
between special interest groups 


we For on-line conversation 
we For commercial or business transactions 


we For on-line training 


nN 
oO 
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we For recruitment purposes 
w» For entertainment 
=e For accessing information on any topic in the world 


Some of the areas where the Internet is being used have been 
discussed below. 


2.4.1 E-commerce 


E-commerce stands for electronic commerce: With the Internet, the 
customers can view the available products and/or services on-line, 
select the product(s) that he wants to buy and place an order for 
these products. Payment details are also specified on-line. Payment 


‘is typically done by specifying a Credit Card number. The customer 


is charged on his credit card for the purchases made and will pay for 
them when he receives the credit card bill. 


Businesses are joining the Internet faster than any other group of 
Internet users. It meets many of their needs, including : 


we» Advertising and marketing 
we» Research and development 
=» Customer support 

we Supplying information 

we Taking orders 

we On-line surveys 

we Recruitment 

we Selling 


The commercial users of the Internet are from various industries like 
computer-related industries, oil companies, pharmaceutical 
companies, healthcare-related industries, financial services, banks 
and many more. 


Even small companies and individual entrepreneurs use the Internet 
to maintain contact with the global market. 
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Many types of businesses have started appearing on the net. Some 
of them are : 





> Book sellers 

» Travel agencies 

=» Courier companies 

we On-line shopping 

E-zines (electronic magazines) 


The speed and the size of the Internet are an advantage for 
commercial ventures. It provides a place where they can reach their 
customers, promote their products, and provide information to others. 
It provides a great many advantages : 


Global communication : 
The Internet provides rapid communication facilities at the cost of 
a local phone call. It allows the users access to a world market. 


Even small, rural businesses have easy access to the global 
market. 


we» No time zone difference problems : 

‘The use of facilities like email and on-line chatting enables the 
companies to be in contact with the suppliers, clients, and 
employees inspite of time differences across continents. E-mail 
messages can be accessed at the user's convenience. For 
immediate contact, on-line chatting is a good tool. 


The Internet has made it possible for employees to live and work 
at a distance. They need not go into the office physically. Transfer 
of information, and meetings can take place over the net. 


. =» Customer feedback and support : 
One of the main advantages of the Internet is being able to maintain 
good contact with the customers. Customers can contact 
companies at any time of the day or night using e-mail and obtain 
information by way of Gopher and FTP. The use of the Internet 
helps in maintaining a close relationship with the customer. 


we Marketing and Sales : 


A web site on the World Wide Web can provide the company with 
a global presence. Companies can establish this presence by 
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using tools like Usenet, Gopher, FTP Telnet, and e-mail. 
Businesses can carry out marketing research online. 


we Information Resources : 
Organisations need all kinds of latest information. Many businesses 
rely on the latest scientific and/or governmental information for 
their operations. The Internet provides this information in 
abundance. 


we Supplier support : 
Contacting old and new suppliers can be done speedily over the 
Internet. This in turn can speed up the procedure to obtain supplies. 


2.4.2 On-line Supermarkets 


On-line supermarkets refer to the sites on the Internet that sell items 
like books, music tapes, and deliver flowers across countries. Some 
sites even have the facility to book movie tickets and have them 
delivered. For example, Amazon.com, BarnesandNoble.com. 


The advantages of these sites are : 


= The user can browse through the products available with that 
supermarket, from home at his convenience. 


we Products that may not be available locally can be bought through 
these sites. 


However, the disadvantage lies in the time taken for the delivery of 
the product. Delivery may not be as quick as desired. 


On-line supermarkets are getting popular and soon people would be 
able to buy garments, household products, and probably even 
computers on the Internet. : 


Figure 4 shows the Web site of a supermarket called Raley’'s & Bel Air. 
It has on-line services like helping the customer to make a shopping 


‘fist (Figure 5) and filling out medical prescriptions (Figure 6). 
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2.4.3. Universities /on-line courses 


Many universities have Internet connection. The universities on the 
Internet tend to exchange resources to help each other. They also 
use the Internet to put up publications, announcement of conferences 
and vacancies. 





The universities also put up information about student loans grants, 
scholarships and work-study programs on the Internet. 


Many universities provide Internet access to their students. 


Potential students, local as well as from other countries, seeking 
admission to universities abroad, can access their web sites. The 
web sites provide information on the courses and programs offered. 


The students can correspond with the universities regarding the 
admission procedures via e-mail. E-mail proves to be a much cheaper 
and faster option than the conventional modes of communication. 


Most universities place a lot of importance on research, especially 
research that brings in grant money. Many government agencies place 
their grant offers on relevant Internet mailing lists and Usenet groups. 


The Internet proves to be a useful tool to researchers : 


we Many academic researchers need supercomputers to run 
programs that perform complex computations. The programs 
cannot be executed on the university computers. The Internet has 
sites where researchers can access supercomputers and pay 
for their use. 


i» Researchers can download software including editors, compilers, 
spreadsheets, databases, and analysis tools to help them in their 
research. . 


we They can conduct surveys by posting questionnaires on an Internet 
mailing list or Usenet newsgroup. 


we Hundreds of academic libraries can be accessed for information 
on the Internet. 


we Articles written by researchers have to be reviewed by peers. 
This is to verify their accuracy before they can be published in 
journals. By putting up the articles on the Internet, the peer-review 
process can be speeded up. 
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» Academic researchers can exchange and discuss ideas via e- 
mail and by conducting public discussions in mailing lists and 
Usenet newsgroups. 
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“» Databases containing the research information are being put up 
on the Internet. Other researchers and the general public can 
access these databases for information. 


“> Publishing articles on the net offer advantages like faster 
publishing, easier distribution, and reduced cost. Articles can take 
months to get published through the normal publishing process. 
However, on the Internet, the whole process could take just a few 
weeks. 


Another area in academics where the Internet is gaining popularity is 
distant learning. It has been implemented by using e-mail, Gopher 
and FTP. People can take these courses while sitting at home or in 
the office. 


Taking courses via the Internet has several advantages : 


» There is more and faster interactivity between the student and the 
faculty than in a traditional, paper-based correspondence. 


» The student can access the Internet from any place in the world. 
Thus, the study material can be accessed from anywhere without 
any break in continuity. 


=» Many courses use Gopher and FTP to make information available. 
This allows the students to explore the study material at their own 
pace. 


» In traditional distance education, access to books, materials and 
libraries was difficult. However, over the Internet the students are 
able to access databases, articles, journals and libraries. 


Distance education is moving toward a virtual reality environment, 
where the user will go through the experience of being present in an 
actual classroom. The students and the faculty will be able to 
assemble in a class-like environment on the Internet. Special hardware 
and software will be required to implement a virtual classroom. 
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The Session In Brief 


we TCP/IP stands for Transmission Control Protoco! and Internet 
Protocol. Computers connected to the Internet use these 
protocols to communicate with each other. 


= Tables are used for arranging objects on a Web page. The 
basic table tags are : 


we <TABLE>, </TABLE>: 

we <TR>, </TR>: 

we <TD>, </TD>: 

= <CAPTION>, </CAPTION>: 


w» A Java Applet is a program written in the Java programming 
language. It allows HTML authors to include live audio, 
animation, or applications in their Web pages. 


The <APPLET> tag is used to include Java applets in HTML 
documents. 


™ Currently, the Internet is being used for emailing, on-line training 
and chatting, accessing information, and for commercial 
transactions. 


E-commerce stands for electronic commerce. The Internet 
meets many needs of businesses like marketing, customer 
support, selling and research. 


On-line supermarkets refer to the sites on the Internet that sell 
items like books, music, and deliver flowers across countries. 


Many universities have Internet connection. The universities 
on the Internet tend to exchange resources to help each other. 
They also use the Internet to put up publications, announcement 
of conferences, and vacancies. 
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Check Your Progress 


1. 


2. 
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TCP/IP stands for J » #+-si Se on & eo A) 


Every node on the Internet has an address _True/Fetse. 


The Internet Protocol takes care of dividing the messages 
into packets. True/FetSe. 


The table data tags define each CoS in the table. 


CELLPADDING allows specification of the amount of space 
between the border and the content of acell. Feae/False. 


Applets can read from and write to files on the local 
machine. True/False. 


—_— 
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SESSION 





SESSION OBJECTIVES 


At the end of this session, the student will be able to - 


“> Invoke Microsoft FrontPage Express 

“> Create a Simple HTML page 

=» Format text — Bold 

=» Format text — Italics 

» Format text — Bold and Italics 

=» Create bulleted lists 

» Create numbered lists 

=» Set text attributes 

» Use standard headings 

=» Set background colour and image for the document 


» Set the default text colour for the document 


The steps given in the session are detailed, comprehensive and 
carefully thought through. This has been done so that the learning 


objectives are met and the understanding of the tool is complete. 
Please follow these Steps carefully. 


The First 1 Hour : 
1.1 Creating a Folder 


We will first create a folder Called A 


ptech to hold all the HTML files 
that we create in this lab session. 
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| 1. Click on the button ‘Start’. 
2. Click on the option ‘Programs’ 
| Refer Figure 1 
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Figure 1 


3. Click on the option ‘Windows Explorer’. 
This displays the Windows Explorer. 







4. Click on the icon for drive ‘C:’ on the left. 
Refer Figure 2. 
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Figure 2 


5. Click on the menu option ‘File’. 















6. Click on the sub menu option ‘New’. 
Refer Figure 3. 
@ Expionng - C:\ 
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| 7. Click on the sub menu option ‘Folder’. 
This creates a new folder with the name ‘New Folder’. 


Refer Figure 4. 
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Figure 4 


8. Type Aptech as the new folder name. 


9. Press ‘<Enter>. 
Refer Figure 5. 
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Figure 5 


10. Click on the button ‘X’ on the top right corner to close 
the Windows Explorer. 


1.2 Invoking FrontPage Express 


1. Click on the button ‘Start’ on the taskbar. 


2. Click on the option ‘Programs’. 
This displays more options. 


3. Click on the option ‘Internet Explorer’. 
This displays more options. 
Refer Figure 6. 
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4. Click on the option ‘FrontPage Express’. 
This starts Microsoft FrontPage Express. Refer Figure 7. 
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Figure 7 
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1.2.1. Microsoft FrontPage Express — An Introduction 


FrontPage Express trom Microsoft is an HTML editor. An HTML editor 
is a tool that enables us to create documents that use the Hypertext 
Markup Language (HTML). 


Using Microsoft FrontPage Express enables us to create Web pages 
using HTML in an intuitive, ‘what you see is what you get (WYSIWYG)' 
manner. Thus, we create HTML pages by formatting text and deciding 
layout as we would do a normal document in any wordprocessor. 
The page created in FrontPage Express will look the same when 
opened in any browser. 


\The HTML required to produce the selected formatting is written by 
FrontPage Express in the background,)This saves the users the trouble 
of remembering and using the appropriate HTML tags and their 
attributes. 


1.3 Creating an HTML Page 






1. 






Type the following text in the blank document displayed 
in FrontPage Express. 
Refer Figure 8. 


Microsoft Office 


Microsoft Office is a suite of office automation 
products that includes : 


Word — Wordprocessor 
Excel — Spreadsheet 


PowerPoint - Presentation Software 


Access - Database Management System 


Outlook - Information Management Tool 
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Mucrosoft Office 


Microsoft Office 1s a suite of office automaton products that includes 


Word - W tdprocessor 
Excel - Spreadsheet 


PowerPomt - Presentation Software 





Access - Database Management System 


Outlook - Informaton Management Tool 
Fl 
Figure 8 


1.3.1. Saving the File 


Click on the menu option ‘File’. 
Refer Figure 9. 
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| 2. Click on the sub-menu option ‘Save’. 








= : 
| 3. This opens the dialog box titled. ‘Save As’. Refer Figure 10. | 
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Figure 10 


| 4. Click on the button ‘As File...’. | 
| This opens the dialog ‘Save As File’. 

| 5. Click on the folder ‘Aptech’. 
l Refer Figure 11. 























~msseltup t LJ Aruna LJ Cdrom J hip_tile 
J Actobat3 (} autodial 4 Corel L) homepage 
) Adobe ©} AutoLayout (5) D3dtemp hore 

J anand LA bem (3 Digital ]Jmt 













J anti LJ Boca (9 Fpw26 (4) Kpems 
F (.4c97 (4) Games () mire 


t SSE 


bent te 8 f. : 


eee nant Pa ae a 


HTML Files (* htm;* html) ~ 





' Save as type: 





Figure 11 
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6. Click on the button ‘Open’. |. 
This makes Aptech the current folder. 






. Type ‘Firsf in the ‘File name:’ text box. 
Refer Figure 12. 





Save As File cea illaatisasnanainnl ee 
| a Aptech 





Figure 12 


8. Click on the button ‘Save’. 


1.4 Testing the HTML Page 


The HTML page created using FrontPage Express will look the same 
in any browser in which it is opened. We will test the page using 


Internet Explorer. 








Click on the menu option ‘File’. 
Refer Figure 13. 






1. 






2. Click on the sub menu option ‘Close’. 
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3. Click on the button ‘Start’ on the taskbar. | 
4. Click on the option ‘Programs’. | 
| 5. Click on the option ‘Internet Explorer’. 
Refer Figure 14. 
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Figure 14 
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6. Click on the option ‘Internet Explorer’. 
This displays the message box titled ‘URL not found in 


Offline Mode’. Refer Figure 15. 


Techie... -#x| 


The URL you requested ts not available offline 













~ fttp://home. microsoft.com? 


Internet Explorer can attempt to connect to the Internet 
and download the most current content. It must be 
configured to connect to the intermet as needed in order to 


succeed. 










Figure 15 





7. Click on the button ‘Stay Offline’. 
This starts ‘Internet Explorer’. Refer Figure 16. 
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Figure 16 


8. Click ¢ on 1 the menu option ‘File’. 
Refer Figure 17. 
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Figure 17 


9. Click on the menu option ‘Open...’. 
This opens the dialog ‘Open. 


| 10. Specify ‘c:laptech\first.htm’ in the text box ‘Open:’. 
| Refer Figure 18. 


Open inaiehtnethianeiemdinhineadenatien Mere ed 20 x! 


pes Type the Internet Bdress of a dotument or folder, and 
. Internet Explorer will open it for you 


w 
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Figure 18 


11. Click on the button ‘Ok’. 
This page first.Atm is displa 


yed in the Internet Explorer 
Refer Figure 19 
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Macrosoft Office 

Microsoft Office 1s a sunte of office automaton products that mcludes 

Word - Wordprocessor 

Excel - Spreadsheet 

PowerPomt - Presentanon Software 
| 

Access - Database Management System | 


Outlook - Informanon Management Tool | 








Figure 19 
1.4.1 Some Points to Note 


Here are a few.goints to note about the page : 


«> The title bar of the Internet Explorer window displays the title 
Microsoft Office. This is called the page title. Refer'to Figure 19 
on Page 52. The text displayed in the text box ‘Page Title’ of the 
‘Save As’ dialog box in Figure 10 is displayed in the title bar of 


Internet Explorer. 


we The page looks the same when viewed in Internet Explorer as |: 
did in FrontPage Express. This is why FrontPage Express Is called 


as WYSIWYG environment. 


12. Click on the button ‘X’ at the top right corner of the Internet 


Explorer. 
This closes the Internet Explorer. 


1.5 A Look at the HTML Code 


We have just typed some text in the document and saved it. At this 
point, we will take a look at the HTML code the FrontPage Express 
has created in the background 
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1. Click on the menu option ‘File’ of FrontPage Express. 
Refer Figure 20. 







Sky See i9s ce atte i eae 


New = CuleN 
Open ClO 





Click on the menu option ‘Open...’. 
This displays the dialog ‘Open File’. 


Click on the radio button ‘From File’. 


Type ‘c:\aptech\first.htm’ in the text box. 
Refer Figure 21. 
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Figure 21 


Click on the button ‘OK’. 
This opens the file first.htm. 


Click on the menu option ‘View’. 
Refer Figure 22. 
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Microsoft Office is a suite of office automaton products that mclude 
Excel - Spreadsheet 

PowerPoint - Presentanon S oftware 
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Figure 22 













7. Click on the sub menu option ‘HTML...’. 
This opens the dialog titled ‘View or Edit HTML’. Refer Figure 23. 





i View os Edit HTML 6 


chtml> 










<head> 
cmetea http-equiv= “Content-Type” 

content="“text~“html charset<1s0-8859-1~ 

<mets noeme= “GENERATOR” content= “Microsoft FrontPage Express 2 0°> 
<tatleoMicrosott Office</tatle> 

head» 









<body bgcolor="SFFFFFF* > 


<poMicrosoft Of fice</p> 





<p>Microsoft Office is a suite of office automation products that 
includes </p> 


«p>Word - Vordprocessor< /’p> 










<p Excel - Spreadsheet</p> 
<p»PoverPoint - Presentation Softvare</’p> 


<poAccess - Database Management System</p> 





<p?Outlook - Information Management Tool</p> 





<po&nbsp </p> 


‘ ne Pn {Raearenie—— —-ewemaesen 
C Oona © Curent — & Show Color Coding OK | Cancel | 


[View or edi the current HTML 


Figure 23 
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1.6 An Explanation 
The code created by FrontPage Express for the page First.htm is: 

















<html> 


<head> 
<meta http-equiv="Content-Type” 
content="‘texv/html; charset=iso-8859-1"> 


<meta name=""GENERATOR’” content="Microsoft FrontPage 
Express 2.0"> 


<title>Microsoft Office</title> 


</head> _ 
<body bgcolore"#EREFFP'>: hes 
<p>Microsoft Office</p> 

<p>Microsoft ice isa suite of office automation products that 
includes: </p> 3 


:FP2WOIE s Wordprpcessorelp>». +o ee ee 
<p>Excel - Spreadshest</p> Sea 
<p>PowerPoint - Presentation Software <p> 
<p>Access - Database Management System</p> 
‘<p>Qutlook - Information Management Tool</p> 


<p>&nbsp;</p> 
<p>&nbsp;</p> 


</body> 


</html> 
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1.6.1 Basic Structure of the HTML Page 
eee SE 


All HTML pages have the following basic structure : 


<HTML> 
<HEAD> 
</HEAD> 


<BODY> 
</BODY> 
</HTML> 


1.6.2 The Tag <HTML>...</HTML> 


All information in an HTML page is enclosed in tags to indicate its 
nature. 


All HTML documents start with the tag <HTML> and end with 
</HTML>. All other information is placed between these tags. 


Thus, <HTML> defines the start of an HTML page while </HTML> is 
the end of the page. = 


1.6.3. The Tags <HEAD>...</HEAD> 


The tags <HEAD>...</HEAD> hold information that is not displayed 
as the main body of the text. It holds information such as the titlé of 
the page and the keywords which when searched for will locate this 


page. ) 
1.6.4 The Tags <TITLE>...</TITLE> 


The tags <TITLE>...</TITLE> are used to enclose the text that is to 
be displayed as the title of the page. These tags are always placed 
between the tags <HEAD>...</HEAD> of the HTML page and hold 
the text to be displayed in the title bar of the browser. 


1.6.5 The Tags < BODY >...</ BODY> 
All text that is placed between the tags < BODY >...</ BODY> will be 


displayed as the main body of the web page. This is the text that 
forms the contents of the web page. 


In addition to text, we can also display graphics, pictures, movie clips 
etc. as the body of the web sage] 
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The tag <BODY> has several attributes that are used to set the 
characteristics of the text. One such attribute is ‘BGCOLOR’. This 
sets the background colour for the web page. The colour in web pages 
is to be specified using numbers in the hexadecimal format. 


“#FFFFFF" stands for the colour white. 
1.6.6 The Tags <P>...</P> 
Every paragraph must be enclosed within the tags <P>...</P>. 


«> (HTML does not recognise the press of the <Enter> key as the 
end of a paragraph-) 


8. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 


7 Enhancing the HTML Page 


1.7.1 Bold 


We will now display the text ‘Microsoft Office’ in bold. 








‘Microsoft Office’ in the file first.htm.- 





1. Select the text 
Refer Figure 24. 





a A block of text may be selected by clicking at the start of the 
block and dragging the mouse till the end of the block with the 
.. . left mouse button pressed. 
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Microsoft Office 1s a sute of office automaton products that includes 


Word - Wordprocessor 


<u 


Excel - Spreadsheet 


PowerPomt - Presentaton Software 
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Access - Database Management System 


Outlook - Informaton Management Tool 
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[2eeconds [~~ [~ | 
Figure 24 
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Click on the menu option “Format’. 
Refer Figure 25. 





Click on the sub menu option ‘Font...’ 
This displays the ‘Font’ dialog box. 


Select the option ‘Bold’ from the ‘Font Style:’ list box. 
Refer Figure 26. 











2 FrontPage Express - [c:\aptech\fust.him) 


a eth ¥, oe 


Microsoft Office 1s a suste of office automation products that includes 
Word - Wordprocessor 

Excel - Spreadsheet 

PowerPomt - Presentation Software 

Access - Database Management System 


Outlook - Informaton Management Tool 






Miro: oct the character tines of 


Figure 25 
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Figure 26 


[5 Click on the button ‘OK’. | 
| 


6. Click anywhere in the file. 
The text Microsoft Office gets displayed in bold. Refer Figure 27. | 


Microsoft Office 


Microsoft Office 1s a suite of office automanon products that in 


Word - Wor dprockssor 


Excel - Spreadsheet 


PowerPount - Presentation Software 





Access - Database Management System 


Outlook - Informanon Management Tool 


Figure 27 
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1.8 An Expianation 


| '. Click on the menu option ‘View’. 
| 
| 


Click on the sub menu option ‘HTML...’. 
This displays the dialog ‘View or Edit HTML’. 


3. Consider the line of code : 


aaninenenepamentnnceD 


<p><strong>Microsoft Office </strong></p> 


| 


1.6.1 The Tags <STRONG>...</STRONG> 


Any text that is enclosed between the tags <STRONG>... 


</STRONG> gets displayed in bold when the HTML page is viewed 
in the browser 


1.8.2 __An Alternative 


The tags <B>...</B> can be used instead of<STRONG>... 
</STRONG>. Any text enclosed within the tags <B>...</B> will 
produce the same effect as <STRONG>... </STRONG>. 


| Thus, 
| <strong>Microsoft Office </strong> 
is equivalent to : 


<b>Microsoft Office </b> 





4. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 


1.8.3 Italic 







Select the text ‘Microsoft Office’ in the line ‘Microsoft 
’ Office Is a sulte of office :...’. 


2. Click on the sub menu option ‘Font...’ 
This displays the dialog ‘Font’. 


Select the option ‘Italic’ from the list box ‘Font Style:’. 
Click on the button ‘OK’. 
Click anywhere in the file. 


a eee 


The text Microsoft Office gets displayed in italic. Refer Figure 28. 
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Microsoft Office 

Microsoft Office 1s a suite of office automation products that mcludes 
Word - Wordprocessor 

Excel - Spreadsheet 

PowerPount - Presentation Software 

Access - Database Management System 


Outlook - Informanon Management Tool 
x 
“Sieh S| aiiis th cei Reece (0S FOES ES 
Figure 28 


1.9 An Explanation 


1. View the HTML code of the file. 


2. Consider the line : 


<p><em>Microsoft Office</em> is a suite of office automation 
products that includes: </p> 


1.9.1. The Tags <EM>...</EM> 








Text that is enclosed in the tags <EM>...</EM> will be displayed in 
italics. 


1.9.2 An Alternative to <EM>...</EM> 

Text that is to be italicised may also be enclosed in the tags <I>...</I>. 
Thus, 

<em>Microsoft Office</em> 

is equivalent to : 


<i>Microsoft Office</i> 
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| 3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML] 


1.10 Nesting Tags 








Select the text ‘office automation’ in the line of text ‘Microsoft 
Office is a suite of office automation...’ 


Click on the sub menu option ‘Font...’ 
This displays the dialog ‘Font’. 


. Select the option ‘Bold Italic’ from the list box ‘Font Style:’. 


. Click on the button ‘OK’. 
. Click anywhere in the file. 


The text office automation gets displayed in italic. Refer Figure 29 


Z. FrontPage Express - [c:\aptech\first.htm] BOE 
[R Fie - Ede Mew Go Inset Format Tools Table Wrdow Hep ee (1 6-3| 
pe all | [Temes New Roman *); A «| ‘Bru Plez aziz i= oe oF | 
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Microsoft Office 


Microsoft Office 1s a suite of office automation products that cludes 


Word - Wordprocessor 


Excel - Spreadsheet 


PowerPomt - Presentanon Software 





Access - Database Management System 


Outlook - Informahon Management Tool 


Figure 29 


1.11 An Explanation 








| 1. View the HTML code. 


c ae 
| 
| 


(2 Consider the line : 
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<p><em>Microsoft Office</em> is a suite of <em><strong> office 
automation</strong></em> products that indudes:</p> 


The text office automation is enclosed within two sets of two tags : 





<em><strong>office automation</strong></em> 


The rule to follow when two or more sets of tags are applied is 
that the tags that is applied last ends first. Thus, tags are to be 
applied in the order : 


<tag 1> <tag 2>...<tag N>........... </tag N> ...</tag2></tag1> 


3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 


1.12 Bulleted Lists 


4. Select the lines : . on 


Word - Wordprocessor 
Excel - Spreadsheet 


PowerPoint - Presentation Software _ 


Access - Database Management System 


Outlook - Information Management Tool - 


. Select the menu option ‘Format’... /> >” 
Refer Figure 30. ie 
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‘’ 4 
Bemove Formatting 


Microsoft Office 


Microsoft Office is a suste of office automation products that includes 










Word - Wordprocessor 


Excel’ «Spreadsheet 


PowerPomt - Presentation Software 













Access - Database l.fanagement System 


Jutlook - Information Management Tool 


eer er oe 








Figure 30 










Select the sub option ‘Bullets and Numbering.. 
This displays the dialog ‘List Properties’. 


_7. Select the tab ‘Bulleted’. 


8. Select the second option in the first row. 
Refer Figure 31. 
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Bulleted | Nubei 
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_ Click on the button ‘OK’.. | 
The selected list is given bullets. Refer Figure 32. 
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Microsoft Office 
Microsoft Office is a suite of affice automation products that includes 
© Word - Wordprocessor 


© Excel - Spreadsheet 
© PowerPount - Presentation Software 


© Access - Database Management System 
© Outlook - Informanon Management Tool 





2 seconds [7 


Figure 32 


66 


Scanned by CamScanner 


Session 1 





1.13 An Explanation 
Nn 


1. View the HTML code. 


2. Consider the lines : 












<ul type="disc"> 
<li>Word - Wordprovessor</i> 
<li>Excel - Spreadsheet</i> 
<li>PowerPoint - Presentation Software</li> 
<li>Access - Database Nenacarnedt System</i> 


<li>Outlook - Information Management Tool</li> 





1.13.1. The Tags <UL>...</UL> 
rene ee ee 


Bulleted lists are referred to as unordered lists. 

The tag <UL> indicates the start of a bulleted list while </UL> signals 
the end of the bulleted list. The attribute ‘TYPE’ indicates the type of 
the bullet to be used. 

1.13.2 The Tags <LI>...</LI> 


Each bulleted item is to be enclosed in the tags <LI>...</LI>. 


3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 





1.14 Numbered Lists 


a 
1. Select the lines : . 


Word - Wordprocessor 
e Excel - Spreadsheet 







e PowerPoint - Presentation Software 
e Access - Database Management System 


Outlook - Information Management Tool 
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3. Select the sub option ‘Bullets and Numbering...’. 
This displays the dialog ‘List Properties’. 


4. Select the tab ‘Numbered’. 


5. Select the second option in the first row. 
Refer Figure 33 








fd. : 
\piBuleted ; Numbered | Other | | 
ie ac 


IIe 










t —— 
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7 
a 
a 


~ Start St 


Figure 33 





é cikenthepiion@K.. |... 4 
The text is displayed as a numbered list. Refer Figure 34. | 
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Figure 34 


1.15 An Explanation 





1. View the HTML code. 
Zi Consider the lines : 
<ol type="1" start="1"> 
<li>Word - Wordprocessor</li> 


<li>Excel - Spreadsheet</li> 







<li>PowerPoint - Presentation Software</li> 
<li>Access - Database Management System</li> 


-<li>Outlook - Information Management Tool</li> 


</ol> 
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1.15.1 The Tags <OL>...</OL> 
Numbered lists are referred to as ordered lists. 


The tag <OL> indicates the start of a numbered list while </OL> 
signals the end of the list. The attribute ‘TYPE’ indicates the type of 
the numbering to be used. The attribute ‘START’ indicates the value 
at which numbering should start. 


Thus, the line : 
<ol type="1" start="1"> 


indicates that number format to be usedis 1.2...etc. and the numbering 
should start at 1. 


1.15.2 The Tags <LI>...</LI> 


Each numbered item is to be enclosed in the tags <LI>...</LI>. 





1.16 Saving the File 


sarin 1 option’ File’. te 
a. fs Guy ey a = 
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ilies a (C:\Aptech\ first. htm] 
i Edt -Yiew Go Insert, Format Tools ~ Table, Window Help 


Tin New 


Open 
















Save 
Save As 
Save Ai 


Page Prapetes 


Page Setup 
Pant Preview 
Print 

Send 


1 frst 

Qty 

3 CAWINDOWS\DESKT OP\ymi\AGUPA \pp\0B T_Scapting_Pian htmd 

4 CA\WINDOWS\DESKT OP\pr\AGUPA \pp\AGUPA_Help_Work_Plan_Feb 10 him 


Exit 
Bee Be caive page 7 
Figure 35 


1.18 Creating a New File 





Click on the menu option ‘File’. 


Click on the sub option ‘New...’. 
This displays the dialog ‘New Page’. 


Select the option ‘Normal Page’. 
Refer Figure 36. 


Click on the ‘OK’ button. 
This displays a blank page. 
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£ 


: > ik eer P 
£ Temple 0 of « Wizatd ir 


‘1 Contirmation Form 
Form Page Wizard 
Personal Home Page Wizard 
Survey Form 





Figure 36 


5. Type-the following text in the new page that Is displayed. 


Some More Formatting Options in HTML 





Setting Text Attributes 


In this section, we wil leam to set text attributes such as: 


fi 


Colour + 


oe ss 


Font 


First. we will: anit ‘to set idifibutes 3 for the selected text 
and later will set the attributes for the whole document. 


> ; pote Document Properties _ 


~ Some of the attributes that can be set at the document | level 
are : é 


' Background sa 


Text 


in this section, we will learn to set attributes that affect 
| the document as a whole. aaa 
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Setting Background Characteristics ° 





We can specify the colour or the image that is to be used as 
the background for the document. 


Setting Text Characteristics 


It is possible to set text attributes for the entire document. 
This includes the font face, font size and colour. 


6. Save the file in ‘c:\aptech’ as ‘text_attr.htm’. 


1.18.1 Formatting Selected Text 










. Select the text ‘Some More Formatting Options in HTML’. 
2. Click on the menu option ‘Format’. 
3. Click on the option ‘Font...’. 

. Select ‘Arial’ from the list box ‘Font’. 
. Select ‘Bold’ from the list box ‘Font Style’ 
. Select ‘5 (18 pt)’ from the list box ‘Size’. 


. Select ‘Red’ from the drop down list box ‘Color’. 
Refer Figure 37. 


73 


Scanned by CamScanner 


£ 


ae 


A 


Internet and Web Page Designing 


PA oe 


Lab Gulde . 





Font | Special Styles| 
1? as. Te Tere De 
























Bi st 
E Font tb . ve Font Style. Size: 
Bi fanal [Bod (aaUErS) 
p Regular 1{8pt) « 
F Anal Black 2 (10 pt) 
1 Anal Narrow 3 (12 pt) 
Ce AvantGarde Bk BT Bald Italic (14 pt] 
be ~ TAvantGarde Md BT 
6 (24 pt) 





BankGothic Lt BT 
BankGothic Md BT | 


Pon, * Rey eT) ore 
yh A = 3} 2 


7 (36 pu =] 





SSS) Sample l= 
| Eine 1 | 


bd Bm paresis grucidcryoa | 
ia a oo speerrvcatul 
| _f 

bie Z 












Figure 37 






8. Click on the button ‘OK’. 
_ The look of the text changes to reflect the choices made in 


‘© the dialog ‘Font’. Refer Figure 38. 





E A stalls fla (ORT me a 


Some More Formatting Options in HTML 


Setnng Text Atmbuteo 


In this sechon, we will learn to set text attnbutes such as 





Colour 


Font 


First. we wil leam to set attnbutes for the selected text and later will set the ammbutes for the 


whole document 


Setnng Document Propertes ‘i 


ere ee Teak 


Figure 38 
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1.18.2 An Explanation 
ee 


. View the HTML code. 






. Consider the line : 






<font color="#FF0000" size="5" face="Arial"><strong>Some 
More Formatting Options in HTML</strong></font> 


1.18.3 The Tags <FONT>...</FONT> 
alae ee ee 


The tags <FONT>...</FONT> are used to specify the font that should 


apply to the text included between them. The attributes that can be 
specified with these tags are: 


=» COLOR 
Specifies the colour to be used. HTML uses a special hexadecimal 
number system to specify the colours to be used. 

we SIZE 


This attribute specifies the size of the font. HTML uses “relative” 
size specifications. All text sizes are specified with respect to the 
default size. “SIZE = 1” means that the text should be one size 
bigger than the default while “SIZE = -1” means one smaller than 


default. Default size of the font is the size that you have been 
seeing so far on the screen. 


we FACE 


This attribute is to be assigned a string value that is the name of 
the font to be used. 





3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 
1.19 Headings 


HTML provides six levels of headings. The headings are applied using 
the tags : 


> Level 1 - <H1>...</H1> 
w Level 2 -.<H2>...</H2> 
> Level 3 - <H3>...</H3>_ 
ww Level 4 - <H4>...</H4s 
we Level 5 - <H5>...</H5> 
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we Level 6 - <H6>.. </H6> 
The use of the heading tags helps in ensuring a uniform look and feel 
for the document. 


i. Sole | 


1. Select the text ‘Setting Text Attributes’. 


2. Select drop down list box ‘Change Style’ in the Formatting | 
toolbar. | 
Refer Figure 39. 





EC FrontPage Express - (C:\Aptech\text_atts htm) rw 
(A Fle Edt. View Go |nset Format Jools. Table Window Help 18) xj 
[Hommal I} [Times New Roman 7] A a Bs w/w EE j= := <E 
*fAddres: (te eee pee ey 7 

"2980 80R,e ~--fo ge 


‘| Bulleted List 













Duectory List 
Formatted 
1 


wml learn to set text attmbutes such as 


Furst, we will leam to set attnbutes for the selected text and later will set the artnbutes for the 
whole docurnent 


Settng Document Properties a 


FoHep.pessFI Tho el | t- ‘ 2 seconds 


Figure 39 





. Click the option ‘Heading 2’ in the list box. 
The text changes look to match the style of Heading 2., 


. Select the text ‘Setting Document Properties’. 


Select the option ‘Heading 2’ from the drop down list box 
‘Change Style’ in the Formatting toolbar. 


Refer Figure 40. 
Select the text ‘Setting Background Characteristics’. 

_ Select the option ‘Heading 3’ from the drop down list box 
‘Change Style’ in the Formatting toolbar. 


= - ————_____| 
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8. Select the text ‘Setting Text Characteristics’. 







9. Select the option ‘Heading 3’ from the drop down list box 
‘Change Style’ in the Formatting toolbar. 


Refer Figures 41. 
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f 4, 


Setting Text Attributes ~~ © * 


In this sectbn, we will learn to set text attnbutes such as 





Font 


First, we will learn to set attnbutes for the selected text and later will set the attnbutes for the 
whole document 


Sone Document Properties aes # 
Bo SST, SL ae a aoe sR 
Figure 40 
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Text 
In thus secton, we will learn to set attnbutes that affect the document as a whole 


Setting Background Characteristics 


Te 


We can specify the colour or the mage that is to be used as the background for the document 
t 
) t 
Setting Text Characteristics ; 
' 
Itis possible to set text attnbutes for the entre document Thus includes the font face, font suze and 
nen , eee pm gy wer eens 
g we. eee ae 
Figure 41 
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1.20 An Explanation 


erated ee eer aes 






1. View HTML code. 
2. Consider the lines of code : 
<h2>Setting Text Attributes</h2> 
//Other code here 


<h2>Setting Document Properties</h2> 


//Other code here 


<h3>Setting Background Characteristics</h3> 


HOther code here 





<h3>Setting Text Characteristics</h3> 





1.20.1 The Tags <H2>...</H2> 


Text that is enclosed within these tags is displayed in the default 
style of Heading 2. 


1.20.2 The Tags <H3>...</H3> 


Text that is enclosed within these tags is displayed in the default 
style of Heading 3. 


| 3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. | 


1.21 Setting Document Characteristics 


1.21.1 Background Color 


1. Click on the menu option ‘Format’. 
Refer Figure 42. 
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Some More Formatting Options in HTML 


parr ros |e en 


Setting Text Attributes 
learn to set te: atmmbutes such as 
olour 


-ont 
nt 


First, we will learn to set attnbutes for the selected text and later will set the attnbutes for the 
whole document 


Setting pocument properties ia =e 4 
Fret be beck pou) othe page oS Tea SS i a ao DO BE RE 


Figure 42 





2. Click on the sub option ‘Background...’ 
J ° 

This opens the dialog ‘Page Properties’ with the tab 

‘Background’ selected. Refer Figure 43. 

















* Genera‘ Backgound | Magrs|:Custom| Sst ate 
IE ae 2 Vee eT 
a a rnd tnt 8 eee apy Ld es f woe 4 : 
aoc ay aie et ee CY Seer SIH Ey Ah 5 rae 
T Backoround Image ¢ nT hy denne eo ri . 
' a . Bev ore &. 55 . oat - be 
* Background [4 White >| » Hyper ee Detaun 3 z 
- =: f yee ¥ iF 
Text | Default =| Vished Hypeiiek fin Detauh tr 
, Active Hyperlink i _] Default 5 : 
' a! at eo Seer eer reed 
va os pete mies nicipeets goa 


Figure 43 


79 


Scanned by CamScanner 


Internet and Web Page Designing 















3. Select the colour ‘Silver’ from the list box ‘Background’. 
Refer Figure 44. 


4. Click on the button ‘OK’. 
The page background changes to silver gray. 
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Figure 44 


1.21.2 An Explanation 


1. View the HTML code. 


2. Consider the line : 


<body bgcolor="#COCOCO"> f- 


1.21.3 More on the Tag <BODY>...</BODY> 








The attribute BGCOLOR of the tag <BODY> is used to specify the 
background colour for the document. 


| 3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. | 


B80 


Scanned by CamScanner 


Session 1 





1.21.4 Background Picture 


Click on the menu option ‘Format’. 








Click on the option ‘Background...’ 


Select the checkbox ‘Background Image’. 
Refer Figure 45. 
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Figure 45 







Click on the button ‘Browse...’. 
This opens the dialog ‘Select Background Image...’. 





5. Select the radio button ‘From File’. 


6. Type ‘c:\ in the text box. 
Refer Figure 46. 
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Figure 46 





7. Click on the button ‘Browse...’. 
This opens the dialog ‘Select Background image’. 


8. Select the folder ‘Program Files’. 
Refer Figure 47. 


9. Click on the button ‘Open’. 
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Figure 47 
10. Select the folder ‘Microsoft Office’. 
11. Click on the button ‘Open’. 
12. Select the folder ‘Clipart’. 


13. Click on the button ‘Open’. 


14. Select the folder ‘Backgrounds’. 


15. Click on the button ‘Open’. 
16. Select the file ‘Club Deco’. 


17. Click on the button ‘Open’. 
Refer Figure 48. 
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Figure 48 









18. Click on the button ‘OK’ of the dialog ‘Page Properties’. 
The selected background image gets displayed. Refer Figure 49. | 
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Some More Formatting Options in HTML 


Setting Text Attributes 


In this secbon, we will learn to set text attnbutes such as 
Colour 
Font 
t_ we will learn to set attnbutes fo: the selected teat and later will set the attnbutes f 


whole document 


Setting Document Properties + 


——— 


Figure 49 
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1.22 An Explanation 


1.22 AnExplanation 
19.Viewthe HTML code. §©§©§5=— > 
20. Consider the line : , 


| <body 
| 








background="../Program%20Files/Microsoft%20Office/Office 
Web%20Page%20Templates/Styles/Club%20Deco.gif” —_ 
bgcolor="#COCOCO" bgproperties="fixed”> 





| 21. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. | 
1.22.1 Attribute BACKGROUND of the Tag <BODY>...</BODY> 
Se ee ee ee 


The attribute BACKGROUND of the Tag <BODY3> is used to specify 
the image file that is to be used as background. 


a@v When both the attributes, BACKGROUND and BGCOLOR, are 
set the value set by BACKGROUND takes precedence. 


1.23 Default Text Color 


. Click on the menu option ‘Format’. 





2. Click on the option ‘Background...’ 
3. Select the option ‘Blue’ from the list box ‘Text Color’. 


4. Click on the button ‘OK’. 
Default text colour changes to blue. 


1.24 An Explanation 








1. View the HTML code. 





2. Consider the line : _ 


Paes 
<body 






background="../Program%20Files/Microsoft%20Office/Office/ 
Web%20Page%20Templates/Styles/Club%20Deco.git” 
__ bgcolor="#COCOCO" text="#0000F F” bgproperties="fixed"> _ 
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1.24.1 Attribute TEXT of the Tag <BODY>...</BODY> 


The attribute TEXT of the Tag <BODY> is used to specify the default 
colour to be tor the text 





E 3 Click on the button ‘OK’ of the dialog: ‘View or Edit HTML’. 





1.25 Exiting From FrontPage Express 


1. Save the file. | 


2 Click on the menu option ‘File’. 
E Click on the sub option ‘Exit’. 


The Next 1 Hour : 
1. Create pages as shown in Figures 50, 51 and 52. 


2 Save the tiles as word.htm, excel.htm and powerpoint.htm 
respectively, in the folder c:\laptech. 


3. The pages must have the displayed title and formatting. 
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Figure 50 
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Microsoft PowerPomt 
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Figure 52 
4. Modity the above pages to set the background colour and also 
change the default text attributes. 


Scanned by CamScanner 


Internet and Web Page Designiag 





This page has been intentionally left blank 


88 


Scanned by CamScanner 


SESSION 





SESSION OBJECTIVES 
At the end of this session, the student will bé able to — 


=» Insert a horizontal line 

> Use images _ 

» Use Multi-level bulleting 

we Use a Marquee 

we Create links to other documents 
> Create links to other sections in the same document 
=» Create links to FTP sites?: -* ° + “Sch 

> Create links to mail aS 


The steps given in the session are detailed, comprehensive and 
carefully thought through. This has been done so that the learning 
objectives are met and the understanding of the tool is complete. 
Please follow these steps carefully. 


The First 1 Hour : 
2.1 Inserting a Line 


2.1.1 Opening a File 


1. Invoke Microsoft FrontPage Express. 





2. Close the open blank file. 
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. Click on the menu option ‘File’. 


_ Click on the menu option ‘Open...’. 
This displays the dialog ‘Open File...’. 


5. Ensure that the option ‘From File’ is selected. 


Refer Figure 4 







Laas Sees crass 















F Houndstooth 
Metal Links 
g Pinstiipe 

g Red Blacks 


_) Temporary Intemet Flles Bubbles 
Twan_32 B Caved Stone 
Wangsamp \g Cucles 
Web g Clouds 
Black Thatchi Sandstone 
Blue Rivets g Gold Weave g Setup 






fe Bitmap (* bmp] 


GIST BS 
Figure 1 


. Type in ‘c:laptech\text_attr.htm’. 


_ Click on the ‘OK’ button. 


This opens the file ‘c:laptech\text_attr.htm’ for display. Refer 
Figure 2. 
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| Ae ds | , fei x! 
4 Fle Edt Yiew Go Insert Foimat Took -Table Window Help "oR 2 aS 
[ons] [ws] Aa fer uv Q EEx f 







OS 6B reo. Boue! + petee 
REP ecRBo | — 









Some More Formatting Options in HTML 





Setting Text Attributes 


\° 
| 3 
) 
> 


, First, we walllearn to cer attnhat 


tthe cels te fret at d later wall set the attnbutes for the 
whole document 


Setting Document Properties zx 
aoe SRR 


Figure 2 







8. Scroll to the end of the page. 


9. Press <Enter>. 





10. Click on the menu option ‘Insert’. 
Refer Figure 3. 





a FrontPage Eanes ‘(oH Nev ohane Pt) | 












In this sechon, we w, ‘Ict the document as a whole 


Setting Backgr, 






We can specify the c used as the background for the document 





HTML Makup. 
Sem. 

Setting Text Ch- ase 
pa epedink 






Iris possible to set text attnbutes for the entre document Thus mcludes the font face, font suze and 
colour 


nates fis SSbelow the cures: m= ~ie P . ‘seconde (25 EE ME 


Figure 3 
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11. Click on the option ‘Horizontal Line’. 
This inserts a horizontal line in the file. Refer Figure 4. | 





EZ FrontPage Express - (C:\Aptech\text_att:.htm)] —- : 
{4 Fie Edt. View Go Ince Foimst Tools Table Window Help Fe tas a |8I x} 
if Aa BIU' fp FEES} 





Stet ee 


(GH 4R "Roe Oe + -PO TY 


hee 6 Bo 


we ee 2 








Setting Background Characteristics 
be used as the backgy-und forthe document 


“Me can specify the colour or the image that 1s te 


Setting Text Characteristics 


Iris possible to set text attributes for the entre document This includes the font face, font sce and 


colour 





Figure 4 


2.1.2 Line Characteristics 





Click on the line with the right mouse button. 
This displays a menu. Refer Figure 5. ~ 








2. Select the option ‘Horizontal Line Properties ...’ 
This displays the dialog ‘Horizontal Line Properties’. 


3. Increase the ‘Height’ to ‘3’. 
4. Set ‘Color’ to ‘Blue’. 
5. Select the check box ‘Solid line (no shading)’. 


- Refer Figure 6. 
aes gl ee 
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Setting Lext Characteristics 






It ic ible te cet test ate 


is possible to set ibutes for the entre document This cludes the font fac 








4 MM Siue ~ Eis eae line He shadngl = a ee 
RTP TL ee zt 


Figure 6 





6. Click on the button ‘OK’ in the dialog “Horizontal Line 
Properties’. 
The line is displayed according to the selected options. Refer 
Figure 7. 
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6 es Saye 





iene pian 





s that aff=ct th 





In this secton, we will learn to set attnbuts 













Setting Background Characteristics 
We can specify the colour or the unage that 1s to. be use | as tl aon dtathe d cument 
Setting Text Characteristics 


It is possible to set text attnbutes for the entre document Thus clu fe the font tace, t nt site and 
colour 








igtal Te fare wala aide: eu : '2 seconds sal ee 
Figure 7 


2.2 An Explanation 


1. View the HTML code. 


2. Consider the line: 


<hr size="3" noshade color="#O000EF"> ; | 


2.2.1. The Tag <HR> 














The tag <HR> when placed in an HTML file will draw a horizontal 
line. The attribute NOSHADE indicates that we want a solid line while 
COLOR specifies the colour of the line. 


The attribute SIZE is used to specify the width of the line. 


a (<HR> has no closing tag. ) 
/ 


3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 
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2.3 Inserting an Image 


| 1. Scroll to the end of the page. 





2. Select the menu option ‘Insert’. 
Refer Figure 8 


3. Select the sub option ‘Image...’ 
This displays the dialog ‘Image’. 


|4. Select the radio button ‘From File’. 





| 5. Type ‘c:\’ in the text box. 
| Refer Figure 9. 









ness Sow trann ita 
1, Backigourd Sound « cs ay iF 
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Itis possible to sett 
colour 
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TT es Pett sceiesetneensnnasete ep pate te a seceve- EFT 
7 ; 4 _ : fe. #9 


Ht Other Location | Ci At = ee adil Mei eee See 5 sto sist 


@: From File oe PRT aR 


ne Bicones, | 





¥ 


From Location 






‘ PONE 
4 oie Nes a 






Figure 9 


Click on the button ‘Browse...’ 







Select ‘Bitmap (*.bmp)’ from the list box ‘Files of type’. 






Select the folder ‘Windows’. 


Click on the button ‘Open’. 





10. Select the file ‘Forest’. 
Refer Figure 10. 
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Ly ee 





Oe eo ae 7 | 





Look in Sy Windows 











— Temporary Internet Files PF Bubbles iF Houndstooth 
I Twain_32 PF Carved Stone FF Metal Links f 
—) Wangsarmnp R Cucles ww Pirictripie . 
I eb PF Clouds B Fied Blocks 
A Black Thatch eer VF Sandstone ; 
Blue Rivet: PRGold weave PF Setup 


| + 


Files of type: [Enmnap (* bmp] ~| ; Cancel % ' 


File name 





Figure 10 


11. Click on the button ‘Open’. 
This inserts the select image in the page. Refer Figure 11. 


JZ FrontPage Express - [C:\Aptech\text_atts. htm] , ' BAE 


[9 Fie ect View Go’ Arment _Farrst » Lools\ Table SWandow Heb seins = aslelxd 


[rica =] if Times New Roman oh A a Be ry pe! = =z - 


[SO SR) Blo Row ele soe fre 
Bhi so ee 



















le 


Figure 11 
2.4 An Explanation 





View the HTML code. 


2. Consider the line : 
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| <p><img src="Forest.git” width="256" eight-"256"></p>_ | 


2.4.1. The Tag <IMAGE> 





The tag <IMG> Is used to place an Image In the HTML file. The attribute 
SRC specifies the name of the image file to be used. The attributes 
WIDTH and HEIGTH together decide the display size of 
the image 


<IMG> has no closing tag 


3 Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 





2.4.2 Saving the Image 





1, Save tl file. | 
| The screen will display the dialog ‘Save Image to File’. Refer | 


| Figure 12. | 












r ee ee 


Save this image to a file? 


Save as: 









4 P% Cancel | Help * | 


Figure 12 


2. “Click on the button ‘Yes’. 
this saves aicony ofthe image ie ouen ie 


L 





Whenever the location of the image file is not specified the image !s 
assumed to be in the same directory as the HTML file. Thus, when 
we insert an image not in the current directory, FrontPage Express 
creates a copy of the image in our directory. 


2.4.3. Closing the file 


1 Click on the menu option ‘File’. 


2 Click on the sub menu option ‘Close’. 
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2.5 Customising HTML 
2.5.1 Multi-Level Bulleting pra. 
Consider the list shown below : 


1. Formatting 
e Font 
e Bullets and Numbering 


e Borders 


2. Editing 
e Search and Replace 


e Cut, Copy and Paste 


3. Tools - 
e Spelling and Grammar Check 
e Mail Merge 
e Macros 


To achieve the above multi-level bulleted look in an HTML page. follow 
these steps. 


1. Create a new page. 


| 
2. Type the following list in the page. 


' Some of the features offered by Microsoft Word are : 





Formatting 

| Font 

Bullets and Numbering 
| Borders 

Editing 

Search and Replace 





Cut, Copy and Paste 

| Tools 

Spelling*and Grammar Check 
Mail Merge 





Macros. 
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| 3. Select the list from ‘Formatting to ‘Macros’. 


| 4 Click on the menu option ‘Format’. 


| 
'5. Click on the sub option ‘Bullets and Numbering...’. 
This displays the dialog ‘Bullets and Numbering... ‘ 


| 6 Select the tab ‘Numbered. 


7. Select the second option in the first row. 
Refer Figure 13 











Bulleted Numbered | 


Start At 
I| 1 : 





'8 Click on ‘OK’. 
| This displays the list with the numbers. Refer Figure 14. 
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of the features offered by Microsoft Word are 


~ 


Formatting 

Font 

Bullets and Numbenng 
Borders 

Editing 

Search and Replace 
Cut, Copy and Paste 
Tools 

Spelhng and Grammar Check 
Mail Merge 

Macros 





Ke OO MYAUYN HAW MK 


—_ 





ET ? i a TY ot) gn ee 
LARA Ta SST Ee Be 


Figure 14 


725.2 Editing the HTML code 


To achieve the multi-level bulleting of the list, we need to write some 
HTML code ourselves. 


1. View the HTML code. 





2. Edit the HTML code as-shown below : 





<p>Some of the features offered by Microsoft Word are:</p> 
<ol type=""1" start="1"> 
<li>Formatting 










<ul type=“disc"> 
<li>Font</li>._ eine, 
<li>Bullets and Numberingsili>. 
<li>Borders</li> { 





wile 22S 2 ee 
</li> . Sa oan fhe ee? ano 
<li>Editing Ad Ee TOSS 
<ul type="‘disc”> Se ‘rupee é - 


<li>Search and Replace</li> 
<li>Cut, Copy and Pastec/l> 
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| <li>Tools 
<u! type="disc’> 
<li>Spelling and Grammar Check</li> 
<li>Mail Merge<i> 
<li>Macros</li> 
</ul> 
</li> 


</ol> 


' 3. Click on the ‘OK’ button. 


| Refer Figure 15. 
ZL FeomtP age E xpress - [Unidled Normal Page} 


Lt 








© Speleng and Grammar Check 


© Mal Merge 





Figure 15 





So a 
4. Save the file as ‘c:\lapfech\bullets.htm' with the title | 
‘Multilevel Bulleting’. 





i a 


« 2.6 Marquee 





Marquee Is a feature that enables us to display animated text on the 
page 
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1. Press <Ctrl+Home>. 
This takes you to the top of the page. 





2. Press <Enters. 


3. Press <#> to move one line up. | 


4. Click on the menu option ‘Insert’. 
Refer Figure 16. | 








Break 


ive wml J H a Line Sag 7 
OSM SR Smba Cad 
Comment - ay 
oo Gi Fictey oS es a ering 
a 





: ” File 
Some of the features oe 









1 Formatnng 
© Font Carts a 
. oo 1S HIME Markup 

sorder 

: Edinng m i 7 
= Search Hypedinks 
© Cut, Copy and Paste 

Tool 

© Spelkng and Grammar Check 7 
© Mail Merge 
@ Waer 


inset 3 Maquee at the Jura, ™ ed, ea £ 2 ken Tne eS eh peor roman 


Figure 16 





5. Click on the sub option ‘Marquee...’. 
This displays the dialog ‘Marquee Properties’. 


6. Type ‘Microsoft Word in ‘Text’. 
Refer Figure 17. 


7. Ensure that ‘Left’ is the selected ‘Direction’. 
8. Retain default values of the section ‘Movement Speed’. 


| 9. Ensure that ‘Scroll’ is the selected ‘Behavior’. 





| 10. Select ‘Middle’ as the ‘Align wiih Text’. 


| 11. Ensure the option ‘Continuously’ is selected in the section 
‘Repeat’. 
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12. Select ‘Blue’ as the ‘Background Color’. 
Refer Figure 17. 
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Figure 17 


13. Click on the ‘OK’ button. 
This: displays the marquee in the page. Refer Figure 18. | 


FrontPage Express - (C ranean him] 
dei neast egret eet (Yes HES Seni te my soe ps 


a ooo Kae Td 7 ies Bee Es 


eee mui +30: Pei eiy! 
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Some of the features offered by Microsoft Word are 


1 Formatnng 
© Font 
© Bullets and Numbenng 
© Borders 
2 Edinng 
© Search and Replace 
© Cut, Copy and Paste 


3 Tools 
© Spelling and Grammar Check 
e Ma Merge 





é hawwne ; 


Figure 18 
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| 
14. Save the file. 





15. Close the file. 





! 16. Exit from FrontPage Express. 


2.6.1 Testing the Marquee 


' 1. Click on ‘Start’ on the taskbar. 
2. Click on ‘Programs’. 


3. Click on ‘Internet Explorer’. 










4. Click on ‘Internet Explorer’. 
This starts Microsoft Internet Explorer. 


. Click on the menu option ‘File’. 
. Click on the sub option ‘Open...’. 


. Specify ‘c:laptech\bullets.htm’. 







. Press <Enter>. 
This opens the file ‘c:\aptech\bullets.htm’ and displays the 
scrolling text in the marquee. Refer Figure 19. 








} Multilevel Bulleting - Microsoft Internet Explorer 


PRAT ASS Gove shaw te ERM 


Be Ae: 


fe Oe a 








Some of the features offered by Macros ft Word are 


e Spellng and Grammar Check 
e Mal Merge 
© Macros 
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2.7 Links 
2.7.1. Sample Files 





1. Click on the menu option ‘File’. 





2. Click on the sub menu option ‘New...’. 
This opens the dialog ‘New Page’. Refer Figure 20. 


3. Select the option ‘Normal Page’. 


4. Click on the ‘OK’ button. 
This creates a new blank page. 


A et] Page ee oe) et ee ee |x| 





egee vm, 
co] emplate oy Wizard: 


l "| el 


Confirmation Form 


| Form Page Wizard fe. We = 
Personal Home Page Wizard r ICS | 


§ Survey Form Pomc tess 2 rata 








i mE BR Help] 
i = 
i 
BL. ce 
eae rT ave eA aA Y 
Le CI pas ise Reet ay ar = At 
g ela DI ank web pac Nd : Sige! & ' 
4} U 2, ¥ J ; 
pies Be oe , eae 
a Pn eh as Hee et ‘ et 


% aes 

BRE eR ae Sites eh fate yoy a 
AES | 
yet nokta sapere: -- 
* 26) ee OS 


Figure 20 


5. Type the following text in the file : 


Microsoft Office Suite consists of the following products : 











Word 
Excel 
PowerPoint 


| Access eee 
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: — © se 
. Save the file as ‘main.htm’ in the folder ‘c:\iaptech’ with ahi 
title set to ‘Microsoft Office’ SPN 

7. Close the file. o 


8. Create a new file. 


9. Type the following text in the file : 





Microsoft Word is a word processor that offers a range of features 
that enable us to edit and format text. 








10. Save the file as ‘word.htm’ in the folder ‘c:\aptech’ with 
title set to ‘Word’. 


11. Close the file. 





2.7.2. Establishing Links 


. Open the file ‘c:\aptech\main.htm’. 
. Select the text ‘Word’. 


. Click on the menu option ‘Insert’. 
Refer Figure 21. 7 


. Click on the sub option ‘Hyperlink...’. 
This displays the dialog ‘Create Hyperlink’. 


. Type ‘word.htm’ in the text box ‘URL’. 
Refer Figure 22. 
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Figure 21 







Hyperlink-T ype: frp | 55 ages 
r . enn. ee Ne) ‘ ay af 


Aap. ne Ne vike ‘ad 
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Figure 22 





6. Click on n the | ‘OK’ button. : 
This displays the text underlined. Refer Figure 23. 
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Word 

Excel 
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Figure 23 


7. Save the file. 


2.7.3. Testing the Link 


Now that we have created the link, we will learn to test the link from 
with Microsoft FrontPage Express : 


1. Click on the link with the right mouse button. 


This displays a menu. Refer Figure 24. 
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2. Select the option ‘Follow Hyperlink...’. 
This takes you to the page ‘word.htm’. Refer Figure 25. 





ZC FrontPage Express - (C: \Aptech\word htm] BOG 
CF Bek St Mews Go cbrert Foimal sods Table. wedom Hey 9 wig nm mre _alalxs 
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Macrosoft Word is a word processor that offers a range of fratures that enable us to edst and 





format text 


Figure 25 
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2.7.4 Using Microsoft Internet Explorer to Test 





Close the file ‘word.htm’. 


Close the file‘main.htm’. 


Start Internet Explorer. 





4. Open the file ‘c:\main.htm’. 
Refer Figure 26. 
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PowerPoint 











Access 


Figure 26 





5. Click on the text ‘Word’. 
This takes us to the page ‘word.htm’. Refer Figure 27. 
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Microsoft Word 1s a word processor that offers a range of features that enable us to edit and format 
text 





Figure 27 


6. Close Internet Explorer. $4 ak | 


2.8 An Explanation 






7. Switch back to Microsoft FrontPage een 





8. pen me file ‘c: laptechimain.h hte. 


9. View ‘the HT ML code. 







10. Gander the line : 





<p><a href="word.htm">Word</a></p> ~ 


2.8.1 The Tags <A>... </A> 
The attribute HREF of the tags ape «</A> is used to specify the 
link. The link may be to - 


we File 

we WWW site 

we Gopher address 
we FTP site 

w WAIS location 
=» Mail Address 
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I Our case, It is to another file in the same directory. 


a aus 
11. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. hee 


2.8.2 A Link to a Mail Address 





1. Scroll to the end of the file. 


2. Type in the following line : 











For more information contact: info@microsoft.com | 


3. Press <Enter>. 
FrontPage Express recognises ‘info@microsoft.com' as an 
email ID and creates a link. 






4. Select ‘info@microsoft.com’. 
5. Click on the menu option ‘Insert’. 


| 6. Click on the sub option ‘Hyperlink...’. 

This displays the dialog ‘Create Hyperlink’ with ‘Hyperlink Type’ 
is set to ‘mailto’ indicating that the text is linked to a mail address 
and the ‘URL is set to ‘mailto:info @ microsoft.com’. Refer Figure 


| 28. 





bh NN 


Click on the ‘OK’ button. 
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Target Frame: | 


Pit ey RAR, 





Figure 28 


2.9 An Explanation 






1. View HTML code. 


2. Consider the line : 


<p>For more information contact ‘kafhret=" ‘mailto: info@microsoft. 


com"> into ‘> info@microsoft.com</a></p> 














All links to mail addresses are preceded by a ‘mailto’. 





[3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’ 


2.9.1. Testing the Link to Mail Address 








1. Close the file ‘main.htm’. - | 
2. Start Microsoft Internet Explorer. 


3. Open the file ‘c:laptech\main.htm’. 
Refer Figure 29 
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4. Click on the text ‘info@microsoft.com’. 
This starts Microsoft Outlook Express and opens a ‘New 
Message’ window with ‘info@microsoft.com' as the email ID. 
Refer Figure 30. 
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Figure 30 
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_ Close the ‘New Message’ window. ° 
6. Close Microsoft Internet Explorer. 
- Return to Microsoft FrontPage Express. 


_ Close all files. 


© 2.10 Links to Sections of the Same File 





1. Create a new file. 


2. Type the following text : 















Features of Microsoft Word 
Word offers us many features such as : 
Formatting 

Editing 
Tables 












Formatting 
Among the formatting features that Word offers are : 
Font oe 

Bullets and Numbering 

Borders and Shading 

Paragraph 
Drop Cap 
Change Case 









Editing 
The editing features in Word include : 
Cut, Copy and Paste 

Find and Replace 


Go To 





Tables 
Using the Table menu option, we can : 
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Insert tables of required dimensions 
Add/delete rows and/or columns 
Merge Cells 

Split cells 


Format the table 








3. Save the file as ‘c:laptech\Word_features.htm’. 


4. Format the text as follows. 





Features of Microsoft Word 


Word offers us many features such as : 
e Formatting 
e Editing 


e Tables 
Formatting 
Among the formatting features that Word offers are : 


1. Font 

Bullets and Numbering 
Borders and Shading 
Paragraph 

Drop Cap 


2 nf wo DN 


Change Case 
Editing 
The editing features in Word include : 


1. Cut, Copy and Paste 
2. Find and Replace 
3. Go To 
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Tables 
Using the Table menu option, we can : 
1. Insert tables of required dimensions 


2. Add/delete rows and/or columns 
3. Merge Cells 

4. Split cells 

5. Format the table 


Select the heading ‘Formatting’. 


Refer Figure 31. 








FrontPage Express - [C:\Aptech\Word_Features ty} 





“A file Edt View Go |nset Fomat Jools Table werden. BOG a a ee 218) xJ 
[Heading 2 3] [Fees tew Raman Aw! eyo Pewee rer 


3. 


Og 6B sR O= (ROG) e reno lye 
mipBpr « BO 


lah ss as 









Features of Microsoft Word 


Word offers us many features such as 


© Formating 
© Editing 
© Tables 


4 


Among the formating features that Word offers are 


1 Font 


%  Betlete and Mimb anan 


NL REET ipecan 


Figure 31 






[ 6. Click on the menu option ‘Edit’. 
Refer Figure 32. 


7. Click on the sub option ‘Bookmark...’ 
This opens the dialog ‘Bookmark’. Refer Figure 33. 
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© FrontPage Express -[C:\Aptech\Woid_Features.htm] : ; heey ; 
(A Fite FREY view Go inset Format Tools Table Wadow Help =18) x! 
[Head Undo Insert CtbeZ 


eet 


D we 
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Cu Culex 





fo &4 Copy Cite 
Paste Culev 
Cea Del 
Select All Cire 


Find OneF 
Replace Cts 


Hyperknk Cilet 






Fon! Propertes Ab-E ner 


Panong the formatnne features that Word offers are 
1 Font 
Tete and Mimbennn ae sl 
Insert e bookmark at the cursor [2 seconds | 
Figure 32 





ee AT ie Ste 





Bookmark’ «+ 





Bookmark Name: 


a ormatting Clear | 


Other Bactmekan on this Page: 


Help 


Figure 33 





8. Click on ‘OK’. 


9. Repeat Steps 5-8 for the headings ‘Editing’ and ‘Tables’. | 
| 
10. Select the bulleted point ‘Formatting’. | 
11. Click on the menu option ‘Insert’. | 


12. Click on the sub option ‘Hyperlink...’ 
| This displays the dialog ‘Create Hyperlink’. 
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‘ ss 
3 | 13. Select the tab ‘Open Pages’. «+=. 
N a 
a 
§ | 14. Select ‘Features of Microsoft Word from the list box ‘Open 
| Pages: 
'15.Select ‘Formatting’ from the list box ‘Bookmark:’ 
| Refer Figure 34. 
BN ri uetsiitara lan eae cece ale ae et 
Open Pages | vod Wide Web | New Page | 
Open Pages 
Bookmark: [{none} +] 
Target Frame: 
Hyperlink Points To: \Word_Features.htm 
[ox | Cancel i a Extended... | | 
Figure 34 
16. Click on ‘OK’. 
17. Repeat Steps 10-16 for the headings ‘Editing’ and ‘Tables’ 
using the corresponding bookmarks. 
| 18. Save the Page. 
19. Close the Page. 
2.10.1 Testing the Link 
f Start Microsoft Internet Explorer. 
2. Open the page ‘c:laptech\Word_Features.doc’. 
| Refer Figure 35 
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Err Re an 








































5 Ce balls ats road ee pa : s fe 
i Fie’ Ea aes Favors { 1 
ie ae ee “OG ty i a a gs 8 4 . lo 
i a aS (s); ‘Ga: 4 \2 
[ Back eee _ Slop 2 Reliesh | Home Search Favortes Histoy Channels Fullscreen Mod FS 
I Adress €) C \aptech\Word | Featues him | Links 
Features of Microsoft Word 
Word offers us many features such as 
Formatting 
Among the formatnng features that Word offers are 
1 Font 
2 aa oto ‘a 
oo N.. we ee A OWL I 6 ——— —_ 
ere SN LN coi be aa DS LE area 
Figure 35 
3. Click on the bulleted text ‘Editing’. 
The page will scroll to the heading ‘Editing’. Refer Figure 36. 
ieee bidet shader Baad cnte ease erly te edema Olline} 
E a NARS e re 
el a ay 
| GEO) pig we mh a a ae Seach *\Favortet: History Channels | | Fullscreen “Mal | 
hatsles coe. 
Editing 
The editing features in Word include 
1 Cut, Copy and Paste 
2 Find and Replace 
3 GoTo 
Tables 
Using the Table menu option, we can 
1 Insert tables of required dimensions 
2 Add/delete rows and/or columns 
3 Meree Cells a a 
Ry AR BEDS IW Comet 
Figure 36 
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| 4. Exit Microsoft Internet Explorer. 
| 


| 
5. Return to Microsoft FrontPage Express. 


teaeme 
SAN An Explanation 





o Open the file ‘c-laptech\Word_Features.doc’. 
2. View the HTML code. 


3. Consider the line : | 


<h2><a name="Formatting”>Formatting</a></h2> 
2.11.1. More on the Tags <A>...</A> 


The attribute NAME of the Tags <A>...</A> allows us to name 
particular pieces of text. This name can be used to reference the 


text. 
ee 


ee teed et eee eee 
4. Consider the line : 





| <li><a hret="#Formatting’>Formatting</a></li> | 
Whenever the link is to a location within the HTML file, we use the 


bookmark or the name to mark the locations in the file and then link 
to those locations. All bookmarks have to be preceded by the ‘#. 


To link to a bookmark in another file, use the notation : 


<a href = “FileName#Bookmark>Text to be linked</a> 


The Next 1 Hour : 


1. Atfile named sample.htm is provided in your work directory. It 
has formatted text and an image. Design a new page such that 
it has the contents of sample.htm. Format the contents and 
provide the image so that the page you have created 's identical 
to sample.htm. The required image file has been provided to 


you 
Open the files excel htm and powerpoint htm created in lab 


session 1 and add one paragraph in both the files explaining the 
application of both the softwares 


M 
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~ 


Create HTML file access.htm containing some details about oe Ps 
Microsoft Access. a & 
Link all these files to main.htm created earlier in the session. Beare 


Insert a bookmark in the file excel.htm. Create a link to this 
bookmark from main.htm. 
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This page has been intentionally left blank 
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SESSION OBJECTIVES 
At the end of this session, the student will be able to — 


we Use the Personal Web Page Wizard 
we Add comments 


we Add symbols 


The steps given in the session are detailed, comprehensive and 
carefully thought through. This has been done so that the learning 
objectives are met and the understanding of the tool is complete. 
Please follow these steps carefully. 


The First 1 Hour : 
3.1 Using the Personal Home Page Wizard 


In this session, you will learn to use the Personal Home Page Wizard 
This wizard enables you to easily create a personal home page. 


The Personal Home Page Wizard gives hints as to what ts to be 
done at every stage of creation. Please read the instructions carefully 


To create home pages using the wizard 
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5. 


6. 


Invoke Microsoft FrontPage Express. 
Close the blank file. 
Click on the menu option ‘File’. 


Click on the sub option ‘New...’. 
This displays the dialog ‘New Page’. Refer Figure 1. 


Me Perey Me att) Als 1! Roce ee cee oL3 
















In the Cornments and Suggestions section, readers will 
be able to tell you what they think about yaur Home 
Page. 


Do you want to use a form that collects input and 
stores it in a file, of a special kind of link that causes 


most web browsers to rs sete e- oe 


+ 


Ar sctascececcwewsesteeseapeneresveensterareees otrgis cesSeevane trees +simmt 


C Use form, store results in ap page 
C Use link. send e-mail to this address: 


———————— 


(PGS RGRGRREERRODREEReREOs euaunnenesstiineeaee 
cee) cde [a] Ei | 


Figure 1 





Select the option ‘Personal Home Page Wizard’. 


Click on ‘OK’. 
This starts the ‘Personal Home Page Wizard’. Refer Figure 2. 
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ae art R221 a eae Be ahha 


In the Comments and Suagestions section, readers will 
be able to tell you what they think about your Home 
Page 


Do you want to use a form that collects input and 
stores it in a file, of a special kind af link that causes 
mast web browsers to send you e-mail? 

C Use torm store teculls in data file 

C™ Use form, store results in web page 

CT Use link, send e-mail to this address 


_—————— 


(QOSUCUEDDRERGRGCEUCREEERGRORRERooEE 


Cancel | _<Back [New> | Finish 3! 


Figure 2 







Retain the default selected values. 


8. Click on ‘Next’. 
This takes you to the next step where we need to specify the 
Title for the page and the name for the HTML file. Refer 


Figure 3. 
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= Petsonal Home Page Wizard aenemntanat Bs 





» The vacant heeds hts kysont Ba to Cal thE Rew page. 
The Page URL is the name of the HTML file as tis 
stored in your web. The Page Title rs what users seein - 
a web browser. Most authors make thet Teme pet el 


: 


£5 2 
Sie 
Ps reste rare hoy +r 
WO: u ee ae ‘ 
Paes teen 
k ws : Page URL 

[rides hirn 

Page Title 





[Thus 1s My Home Paad ; 


Figure 3 


9. Type ‘index.htm’ in the text box meant for Page URL. 


10. Type ‘This is My Home Page’ in the text box meant for 
Page Title. 


11. Click on Next. 
The next section is the Employee Section where you can enter 


your job details. Refer Figure 4. 
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| Pee ES rn stints its lt dy2-)(t cane Sea 
& The Employee Infotmation section is used to describe ‘ 
p\your job role and responsibilities to other people in your 

, Organization. 


i Select the infofmation to include in this section: 


b Guide 
oY 
osee ceed 


RATED 
‘Lab 


Job title 

I Key tesponsibilities 

M Department or workgroup 
T” Manager 

T Direct reports 


"NOTE: the wizard will create sample links to other. - 5 . 
employee web pages where appropriate. You can 
Change these links later using the FrontPage editor... 

\-ionae 

boy 


Tg ee pcg nates es en eel a 
aaauan 

. MFM, YF 
} z 


nea 

















Figure 4 


Retain the default selected values. 


Click on ‘Next’. 
The next section describes the current projects that you may 
be working on. | 


. Type ‘Learning HTML’ in the text box meant for names of 
current projects. 


Press Enter key. 


. Type ‘Creating Web Pages’. 


Select the option ‘Definition List’. 
This allows you to specify details along with the name of the 
project. Refer Figure 5. 
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_ interested In. Refer Figure 6. 


Ba rie odo Bs eclheetalme 
















Enter the names of some Current Projects you'e 
werking an 


MT . 


Creating Web Pages 





I 


How do you want these ter. precented ? 
C Bullet het 


@ Punbered list 


@ Detinition hist (tern plus descuption) 


Cancel | 





Click on ‘Next’. ; | 
The next section deals with the list of sites that you are | 
| 
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ee ae 










Choose the presentation style for your Hot List of 
Interesting Web Sites 


C ‘Bullet list 
™ Numbered list 


™ Definition hst [item plus descuptian| 


Lab Guide 
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C Import trom web page 


‘GRGUGRCRGGEREeaceeEs 
Cancel | « Back Firush | 


Figure 6 








19. Retain the default option of ‘Bullet List’ as style of | 
presentation for the Hot List of Interesting Web Sites. 


20. Click on ‘Next’. 
The next section for which information is to be supplied ts the 
Biography section. 


r 
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. Select the ‘Personal’ option. 


ae ee nn et od Be 
Select a format for your Biography section: 


C Academic 
-- Institution, Date, Degree ot Position 


C Professional 

-- Company, Title, Date, Achievements 
© Personal. 

~ Date, Milestone 








(GeGRURGGRRRCRRGSORCEEEES 
} , er ns ‘ 
LCancel | - <Back | Next> |. “fini | | 


Figure 7 


Refer Figure 7. 


Click on ‘Next’ . 
The next section allows us to enter some information on 


Personal Interests. 


Type ‘Computers’. 


. Press <Enter> key. 


Type ‘Music’. 


Press <Enter> key. 


. Type ‘Sports’. 


Press <Enter> key. 


_ Select the option ‘Definition List’. 


Refer Figure 8. 
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. 


f Enter some items for the Persona rigeds sclattit: 
‘your Home Page’ ' URN ake 


aan Ten ht Page Wizard ; 


wens 
at 
‘ 





Guide: 
‘ait 


pane 


f eeLeles 


AREY 


a]. 
» How do you want these items presented? 
C Bullet list ; 
' > CNumbered fst,» ? 
4 'Defintion lst fitem plus description) = + 15" 





Figure 8 


30. Click on ‘Next’. 


31. 


This takes us to the section for Contact information. 


Set ‘E-mail address’ and ‘URL address’ as the only 
relevant Contact information to be displayed. 
Refer Figure 9. 
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Figure 9 









32. Click on ‘Next’. 


This takes us to the section for Comments and Suggestions. 
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~ Personal Home Page Wizard 





_Inthe Comments and Suggestions section, readers wi 
, oe able to tell you what they think about your Home 
age. get 


Do you want to use a form that collects input and 
stores it in a file, of a special kind of link that causes 
most web browsers to send you e-mail? 


Use form, store results m data fle 
C Use form, store results in web page 
© Use link, send e-mail to this address: 





coe |e He] _e | 


Figure 10 


33. Retain the default option of ‘Use form, store results in 
data file’. 

This option will create a form at the bottom of the home page 
with text boxes and buttons. The visitors to your page will use 
this form to fill in comments and suggestions. 












34. Click on ‘Next’. 
This will take you to the next step of the Personal Home Page 


Wizard. Refer Figure 11. 
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» Adjust the otdenng of the sections on your Home Page. 
Select an tem, and then use the buttons to move itt up 
or down in the list 


Home Page sections 








Employee Information ' | 
Current Projects 

Hat List os 
Biographical Information fron | 
Personal Interests 

Contact Information 

Comments and Suggestions 


Le sea ndt nc OnATNSUSVECONUEESENTS—— 


beac]. eno [mon] ti | 


Figure 11 


Retain the default order for sections. 


Click on ‘Next’. 
This will take you to the last step of the Personal Home Page 


Wizard. Refer Figure 12. 
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Those are all the answers the wizard needs to create 
your Home Page! 


Click on the Finish button to generate the page. 


PO IP eve 
LabGuide | 
3.4 - 


e 






mauanstusennnanane jvaaaa 
Cancel | Cos Back | Nev. 
Figure 12 


37. Click on ‘Finish’. 


This generates the page shown in Figure 13. 
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I FrontPage Express - (This is My Home Page} i (-[a]*) 
1A) x) 


H Fle Edt View Go Imes Forma Took Tobie Window Helo 

[ricena a] | [iene new F jlaheae ~~ h] Aw BLU PES Bj oe: 
ose 6B fF ROW @ q &? 

fa gr « ao 


This is My Home Page 


Contents 





© Employee Information 

© Current Projects 

© Hot List 

© Biographical Information 
© Personal Interests 

© Contact Information 

s 











Comments and Suggestions 9] 
2 veconds NUM 
Pst) BAY oom | IH | eyin | Or | 20 | am [46 BBlaie 4.03PM 
Figure 13 
38. Save the file as ‘c:\aptech\index.htm’. | 


Each bulleted point is a link to a section on this page. The page is to 
be completed by filling in details in all sections. 


The page has Wizard generated comments all throughout. You will 
use these comments as a guideline while filling up the pages. 


This will be the exercise for this lab session. 


we Some Tips and Tricks 





In this section you will learn about two interesting features of the 
Microsoft FrontPage Express. 


we Comments 
= Special Symbols 
3.2.1 Comments 


Often we need to introduce comments as a part of the HTML code. 
These comments will not be visible on the page but will be a part of 
the HTML code. 


Scanned by CamScanner 


To insert a comment 


1. Invoke Microsoft FrontPage Express. 


2. Open the file ‘c:\aptech\applet.htm’. Refer Figure 14 


3. Scroll to the end of the page. 


4. Press <Enter> key. 





[ 4 FrontPage E xpress - [(C: \Aptech\appiel him) 


Session 4 


i. 


4 





4 fee Eo View Go inset Format Took Tgtte Wine Hep 
14 » ~] [Tene New Fcwner v A a BIU §& Basi 
Os&8 &6Q @~- ROW €@ ere qk 
= GER « & oO 





\ 


ws 


2 seconds 


Figure 14 


Scanned by CamScanner 


A@ix 
=l8) "J 
For 


NUM 


9 


Lab Guide . 


Internet and Web Page Designing 





E Click on the menu option ‘Insert’. | 


2: 











EZ FrontPage Express - [C:\Aptech\applet. him] - BOE 
H Fie Edi View Ss Jook Tgble Window Help slelz 
4 Nowmal jj feck ‘lar u ‘plex a EE ae! 
q Horzortal Line i.8 
3 D&M GR __ Smbst Fe ee pel, 
( mEPc RO 
Inset a comment at the cursor " yi . [2 seconds [. [NUM {—_ 
Figure 15 
6. Click on the sub option ‘Comment...’ 
This displays the dialog ‘Comment’. 
7. Type ‘This is out first comment’. 
Refer Figure 16. 
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COT Tt no ne ene cee: cre oP a ce an Liven stent eel 

























g 
2 
» & 
Keo 
bs 
OK | Cancel | Hep 
Figure 16 
8. Click on the ‘OK’ button. 
The comment is displayed at the bottom of the page. Refer 
Figure 17. 
EC FrontPage Express - [C:\Aptech\applet. him] - 
t Fie Edt View Go jnset Format Tools Table Window Help 7 lel x 
[Noma a Times New Roman _ Zy xy A “ | B ry ple Es =| EES ei 
Oo mt aa! s ce ane & eB. | dais se 
mre mo} , 
Comment Thus is our frst comunent 
Ld 
Fae TOM TS 
Figure 17 
9. Save the page. 
10. Close the page. 
11. View the page in Microsoft Internet Explorer. 
The page does not display the text of the comment. Refer 
Figure 18. 
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4) This is an Applet Test Page - Microsoft Internet els 


[om fo ow ate ap Sa 
TR Se RP Bags 

le. -OR A ORGY aoe Sa 

| Addess [@) C \Aptech\applet him ican Bf 





Thus ts an applet that displays bhnking text 


Thisis first brush applet! 





Saecc 
Figure 18 

12. Exit Microsoft Internet Explorer. 

13. Open the file ‘c:laptech\applet.htm’. 


14. View the HTML code. 





Consider the lines : 


<p><!—webbot bot="PurpleText” preview="This is our first 
comment” —></p> 


A comment in HTML is written as : 


<!—‘This is the Text of the Comment” —> 


15. Close the dialog ‘View or Edit HTML:’ 


16. Close the file. 
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3.3 Special Symbols 


To insert special characters in an HTML page follow these steps. 





—s 


1. Place the cursor at the point where the special character 
is to be displayed. 





| 2. Click on the menu option ‘Insert’. 





EZ. FrontPage Expiess - (C:\Aptech\applet htm] [- [6] 
H Fie Edt View Go QRREEY Format Jools Table Window Help 216! x) 


ee : Bresk "|B 1d »P SBR LE 


i Line 















i, Poe o- ce es ete 
Image.” ‘Hew 
Video... ; 


7; WY i XK ry ; - bee 
Fle. ‘¥ 7 v 


Other Components 





Conunent This is our first comment + 


5 : ; { 4UM 
Inseil'a special character at the cursor = 3 : {2 seconds NU! 


Figure 19 





3. Click on the sub option ‘Symbol...’. 
This displays the dialog ‘Symbof. Refer Figure 20. 





z 


. » % % % 
x @U uu Ys? & 


-e@euuvtuyhby 


Hep | 


Cc 
c 
t 
A 
i 


Figure 20 
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Select the required symbol. 
The selected symbol is displayed at the bottom of the dialog. 


Click on ‘Insert’ to place the symbol in the page. 
Place as many symbols as are needed. 
Click on ‘Close’ to close the dialog. 


View the page in Microsoft Internet Explorer. 


The Next 1 Hour : 


if 


In the previous hour you created a page using the Personal 
Home Page Wizard of FrontPage Express. This page has been 
saved as ‘index.htm’. Complete this page by filling in details in 
all sections. 


The page has Wizard generated comments all throughout. Use 
these comments as a guideline while filling up the pages. 
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SESSION OBJECTIVES 
At the end of this session, the student will be able to — 


we Insert Tables 

=» Set table characteristics such as border and background 
» Set headers 

we Give the table a caption 


we Use Applets 


The steps given in the session are detailed, comprehensive and 
carefully thought through. This has been done so that the learning 
objectives are met and the understanding of the tool is complete. 
Please follow these steps carefully. 


The First 1 Hour : 


4.1 Tables See 


We will now create the following table in HTML : 













Tag 

<U>....</U> Underline 
<STRIKE>...</STRIKE> Strikethrough 
<BR> - 


Line break 





cee 


Ban yee 
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1. Invoke Microsoft FrontPage Express. 


2. Type the following text in the page : 


tie 


The following table lists some HTML tags and their use: | 


3. Press <Enter>. 


4. Click on the menu option ‘Table’. 
Refer Figure 1. —— 


















foes Marys | 


| Layout ES Minimum Width 
THe Secgywan [ 
i: 
lef: 2 
1 


| 
Horgontal Alignment * | Center 


f nee eee . 
Gra j-4 
Header Col How 5 be 





- r ‘ 
“z. 


Gadan Oadliepis Re = 5 
| Use Background image nS ‘ 


| Backgourd Colo HM Detaut ee! °e i 





—_ oe an ae Seb k Sh 


e OAL Sf = 
- Custom Colors 2ee i cetSpan 
oe = pean = | Number of Rows Spanned fi | 


* potted [am Dela A 44 "Nur of Clans Spared fy 
| Desk Border am Defauk a a he fs 








Figure 1 






5. Click on the sub menu option ‘Insert Table...’. 
This displays the dialog ‘Insert Table’. Refer Figure 2. 





Scanned by CamScanner 


Session 4 





Figure 2 


6. Set ‘Rows’ to 4. 


7. ‘Set ‘Alignment’ to ‘Center’. 
Refer Figure 3. 
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Tir s 13 ass: Sats ll Pr 





:Size= : = = SE 4 
4 a : 
1 Rows: “y 4 Af * ; | Lm 
power 4 ee 

| 


_ Colurans: es : meee 





r Layo 


| Center —— 


| Alignment. 






Border Size: 





Figure 3 







Set ‘Border Size’ to 1. 
9. Click on ‘OK’. 
This inserts a 4x2 table in the HTML Gocument. Refer 


| 
Figure 4. | 
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4 Times New Roman 











14 ots we, / 


The following table hsts some HTML tags and thew use 


Figure 4 


10.° Type in the contents of the following table : 
The width of the cells increases to fit the text. Refer Figure 5. 
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FromPage Express « [Untitied Normal Pago) 
(4 fle Lot Yiow Go Invet tyinal Jods Age Yewtow ‘Ate oS _ asad 


firione _ | | Pine: vas New Floman =] || ‘A ae ry) | E ali= ia) 
Nae GA): iomly « | ge er ha ele 2% Ola ier 
Bo MF e (aul 





Vie fe Howe table bets some HTML tags an {thew use 


f 
\Use 


l'ay 
<U> </U> [Underline 

eSTRIKE®  </STRIKE? (Stnkethrough 
<BR> ‘Line break{ | 


| 





a 
BPA ok EA ME, shalbtogh Tescoreds FS [OM STFS 
Figure 5 


11. Save the file as ‘c:\aptech\table.htm’ with title as ‘Tables 





in HTML’. 


4.2 An Explanation 


View HTML code. 


Consider the lines : 








<center> 


<table border="1"> 






<tr> 
<td>Tag</td> 
<td>Use</td> 
</tr> 


<tr> 


<td>&lt; U&gt;...&lt;/U&gt;</Ad> 
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<td>Underline</td> 


<td>&lt; STRIKE&gt;...&lt//STRIKE&gt; </td> 
<td>Strikethrough</td> 





<td>&lt; BR&gt;</td> 


<td>Line break</td> 
</tr> 
</table> 


</center> 





4.2.1. The Tags <CENTER>...</CENTER> 


Text included between the tags <CENTER>...</CENTER> will be 
displayed as centered horizontally in the page. 


4.2.2 The Tags <TABLE>...</TABLE> 


All elements of a table are included between the tags of <TABLE>... 
</TABLE>. The tag <TABLE> signals the start of the table while 
</TABLE> marks the end of the table. 


The attribute BORDER is used with the tag <TABLE> to specify the 
thickness of the table border. If the attribute BORDER is not set then 
the table has no border. 


4.2.3. The Tags <TR>...</TR> 


Each row in a table is enclosed between the tags <TR>...</TR>. 
These tags are used within the tags <TABLE>...</TABLE>. 


For example : 


<TABLE BORDER=1> V4 
<TR>SomeRowDetails</TR> | ~ L 
<TR> SomeRowDetails</TR> | 
</TABLE> 


indicates a table with two rows. 
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4.2.4 The Tags <TD>...</TD> 


The tags <TD>...</TD> are used with the tags <TR>...</TR> to 
define the cells in each row. The text enclosed within these tags is 


included in a cell. 
For example, the HTML code : 


<table border="1 "> 





<tr> 
<td>Cell 11</td> 

<td>Cell 12</td> 
<td>Cell 13</td> 

</tr> 

<tr> 
<td>Cell 21</td> 
<td>Cell 22</td> 
<td>Cell 23</td> 

</tr> 

</table> 


defines a two row, four column table of the type : 


Cell 11 Cell 12 Cell 13 
Cell 21 Cell 22 Cell 23 


4.2.5 Special Characters and HTML 
















Characters such a ‘<’, ‘>’ and ‘&’ have their own use in HTML. For 
example, ‘<’ and ‘>’ are used to enclose tag names. Thus, when we 
need to display characters such as ‘<’ in the body of the text, we 
need to use special notations. 


The following table holds a list of characters and corresponding 
notations. 
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Character 





Notation 
&lt 












3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 


4.3 Some Enhancements 








Click in any cell of the table. 


2. Click on the menu option ‘Table’: 
Refer Figure 6. 









Verenditaiieiieid tome! = =) 3 UE a RT 


Figure 6 
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Click on the sub option ‘Table Properties... 
This brings up the dialog ‘Table Properties’. 


Set ‘Background Color’ to ‘Silver’. 
Set ‘Light Border’ to ‘Gray’. 


Set ‘Dark Border’ to ‘Gray’. 





Figure 7 


7.. , Click on ‘OK’. 


This displays the table with the selected properties applied. 
Refer Figure 8. 
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EZ FrontPage Express - [C:\Aptech\table. ae 





Hone ERT Rue 
Figure 8 
4.4 An Explanation 
View the HTML code. 


Consider the line : 













<table border="1" bgcolor="#C0C0CO” 
bordercolordark="“#808080" bordercolorlight="#808080"> 


The various selected properties have been set as attributes to the 
tag <TABLE>. 


3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. 


4.5 Some More Enhancements to the Table 


4.5.1 Header Row 


In this section, we will designate the first row as a header row : 
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1. Click in any cell of the first row. 


2. Click on the sub menu option ‘Select Row’. 
Refer Figure 9. _ 









| Aged tele ee (Pal) ia a 


LR Fie Edt View Go Insert Format Tools Window Help -16) xj 
[iNone) =] [Tres New Roman Irae Table PEER [FEL KE 
Co ‘ : Inset Rows o Colurnns 
Dee 6B » Fw ce Inset Cel JOla w 
: - Insett Caption - 


ei Ger «© Ho 





Spla Cetts 
The following table lists some HTML tag Select Cet 
Tap SCS*«Sect Cokin 1 
= Setect Table 
'<Y> </U> . 
ae Cef Properties... 
eBR> 


"Solecti the cunent tow in a table 
Figure 9 
Click on the menu option ‘Table’. 


Click on the sub option ‘Cell Properties...’. 
This displays the dialog ‘Cell Properties’. 


Select the option ‘Header Cell’. 


Select ‘Center’ as the ‘Horizontal Alignment’. 
Refer Figure 10. 
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Ez Properties os De no oe ee ee 


> et syout- 


s dpe Aborimant 
_ 


p Vertical Align ient 


=, 


seh 
JRO 








He adei C reli 


' 







Cust: am Bac kground— me 
‘ ws Back grouad image 







ae ts 
Zo. ae os na Se > 


1 FRG tae ly vied rr,” 
ug “tit G any ne | 
ceca ‘ 










Pe SEestom us its 


F ide j |_| MB Delaut a ti hi 
B as pes a - 
Pat Ea i Defaut io Sas eee 





Figure 10 


7. Click on ‘OK’. 


This displays the text in first row in bold and centered. Refer 
Figure 11. 
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| AT te ed he etd teed : 
alte LM Vew Yo leet Tyo ] ss Ign Yoram je joe + tee UN 


rr el i eres New cer *], A A. Hh 1 u we v aE x 
(0 oe bd éofr! r ere goo * eo = glen 
YR epg = figdent Tae 


The follovang table ists some HTML tags and thew use 
pee 
Tag 
> <[y 
< CTP E> (STE Cwriket 


ay Ko 





Figure 11 


4.5.2 An€Explanation 






View the HTML code. 


Consider the lines : 








<tr> 
<th>Tag</th> 
<th>Use</th> 
</tr> 





The cells in the header row use the tags <TH>...</TH> instead of 
<TD>...</TD>. 





SS ee 
3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. | 
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4.5.3 Caption 


Table caption is a row in the table that acts as the title for the table. 





Click in any cell of the table. 
Click on the menu option ‘Table’. 


Click on the sub option ‘Insert Caption’. 
This inserts an area for the caption at the top of the table. 


Type ‘Some HTML Tags in the caption area. 
Refer Figure 12. 








ZC ee ae (c: ts onde eT) | 


The following table hsts some HTML tags and thew use 


Pore Sent HIME Teed _____ 





Figure 12 


4.5.4 An Explanation 





1 View the HTML code. 
| 
{ 


| 2. Consider the line : 








a 
| <caption align= “top">Some HTML Tags</caption> a 
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4.5.5 The Tags <CAPTION>...</CAPTION> 


Text to be used as the table caption is enclosed between the tags 
<CAPTION>...</CAPTION>. The attribute ALIGNMENT indicates 
whether the text is to be displayed at the top or bottom of the table. 


3. Click on the button ‘OK’ of the dialog ‘View or Edit HTML’. | 


4.5.6 Changing Caption Location 








Click anywhere in the caption of the table. 


Click on the menu option ‘Table’. 


Click on the menu option ‘Caption Properties...’. 
This displays the dialog ‘Caption Properties’. ede! 


Select the option ‘Bottom of Table’. 
Refer Figure 13. 





[Caption eer Tee ee eee aes 3] 


Pe ea) ROLY Sepa ETT é, era Reo ek Oa 
if xia oe UF ea ats SERS ee eee rae | 
case in) apes: le Se ON aca 
Re Bibsetg aD 2: IRIE cert 

A ye ate CESS es Asis d 
A Pr 















5. Click on ‘OK’. 
The caption is displayed at the bottom of the table. Refer 
Figure 14. 







7 
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Z@ FrontPage Express - [C:\Aptech\table.him} 


{4 fie Ed Yew Go Intet Fomet Too Table Window Hel . elf] x] 
{nom 2)! Pinertiewtionm 3] Aa ma U | go a fee ps t= So a 
PO CFA eA YW HTN Me FOTN 


iF © Ba | 


ae a 





The following table hsts some HTML tags and them use 


Tag \ Use 


, \ pre: ¥ 

<U>, <> \Underbue j F & 

‘<STRIKE> </STRIKE> Strikethrough ts 

| f Ow 

'<Bk ‘Lane break | 2 
Some HTML Tags 13 





Figure 14 


a To format the text of the caption, select the text and use the 
option ‘Font...’ under the main menu option of ‘Format’. 









6. Save the file. 





7. Close the file, | 


4.6 Using Applets 


a — Res 







Create a new page. 


Type in the following text : 


—_ 


This is an applet that displays blinking text. 


a 


3. Save the file as ‘c:\aptechlapplet.htm’ with the title * Thi 
is an Applet Test Page’. 
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4.6.1. To Add an Applet 





Click on the menu option ‘Insert’. 





2. Click on the sub option ‘Other Components’. 
This displays a new SL. menu. 
| Refer Figure 15 | 


[nner ai} 
Qo ao a a Rh! Symbol 
MEF OBO = a st 


» 












Thus 1s an applet that ' , 





} 
' 





Figure 15 


Click on the option ‘Java Applet...’. 
This displays the dialog ‘Java Applet Properties’. 


Type the word ‘blink’.as the ‘Applet Source’. 


‘blink.class’ is the Java applet file that we are using. 


Type in ‘This is our. first brush with a Java applet’ as the 
‘Message for Browsers without Java Supporty 


Refer Figure 16. 





162 


Scanned by CamScanner 


Session 4 








PAppletBaseUAL) pe ee 
i 7 PO eT ey wey 
' Mess age for browsers ics wlhiced dav support , 








$$ 


} 


=| This ts our first brush with an Javea applet 


L) Applet Parameters as = ---- “3s 
Name Value 


{ 
reg Serre 
‘ 


Lab Guide | 





Figure 16 












Click on the button ‘Add... 
This displays the dialog/Set Attribute Value’. 


| 
7. Specify ‘Ib? as the ‘Name’. | 
Z | 
8. Specify ‘This is our first brush with an Java Applef as | 

the ‘Value’. 
Refer Figure 17. | 


Set entice WP Me eke 





Figure 17 
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9. Click on ‘OK’. | 
The parameter and its value are displayed in the dialog ‘Java | 


Applet Properties’. Refer Figure 18. 
ee 





TRESS Shihan 





PRP eat its bas ae ea 


> Applet Source: 
t [ink 
Applet Base URL 


- Message for browsers without Java support 





Layout ———-- "= ems 
128 fH | | Horizontal spacing’ - [o te . 


Figure 18 


_ Click on the button ‘Add...’. 


This displays the dialog ‘Set Attribute Value’. 





11. Specify ‘speed as the ‘Name’. 
12. Specify ‘F as the ‘Value’. 

13. Click on ‘OK’. 

14. Type in ‘400 as ‘Width’. 

15. Type in ‘200 as ‘Height’. 


16. Click on ‘OK’ of the ‘Java Applet Properties’. 
This adds the Java applet to the page. Refer Figure 19. 
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| 4 Soci Senta La he setiacheeainen hen H 


17. Save ihe file.’ 
18. Close the file. » 
19.° Invoke Microsoft Internet Explorer. 


20. Open, the file ‘Sitptechiapplet htm. 


v4 
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2 | hota) balsa Lan er Me ec mas Ly 
[feb Eas ew Go Fyodor He 
Pease Sa aa ABSGw 









This 1s an applet that displays bhnking text 


first © with Java applet 





Bvacomimeem sea 2 Sen TT Ee (BF Wo Coma 


Figure 20 


4.7 An Explanation 


1. View the HTML code. 


2. Consider the following lines of code : 








<applet code="blink’align="baseline” width="400" height="200"> 


<param 
name="Ib!” value="This is our first brush with an Java applet”> 







<param 
name="speed” value="1"> 
This is an applet that displays blinking text.</applet> 
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4.7.1 The Tag <APPLET>...</APPLET> 

ee RAE ER he 

The tag <APPLET> Is used to insert Java Applets into a Web page. 
Java Applets are files with an extension ‘.class’. The attribute CODE 
of the tag <APPLET> is used to specify the name of the Java applet 
file. 


code="blink” 


meanis that the applet to be used is ‘blink.class’. The attributes WIDTH 
and HEIGHT are used to specify the display size for the applet. 


Lab Guide 4 
reine 


<. ¥ 
eet 


es 


An applet can be customised using its parameters. Parameters of an 
applet let us pass information to the applet. ‘blink.class’ has two 
parameters : 

=» Ibl — The text to be displayed. 

=» speed — The rate of blinking. 

To pass values to the applet's parameters, we use the attribute 


PARAM. We have to specify the name of the parameter and the value 
it is to be assigned. 


167 


Scanned by CamScanner 


Internet and Web Page Designing y 


ee ae 
ae The Next 1 Hour : 


1. Design a page as the one shown below in Figure 21. 









Visual Basic 4 Weert 





Figure 21 


2. Add the information shown in Figure 22 to the bottom of the above 
page : 


e Using the style ‘Heading 3’ for Prerequisites. 


e The user must be able to send mail by clicking either on the 
image of the mailbox or on the text ‘info @ aptech.com’. 


6” Images can also be given hyperlinks just like text. 


168 


Scanned by CamScanner 


Session 4 





EL Ltd. - Schedule of LL RT Eee err in h in eee| Stee ee 


[Working Oltiine] 
| fle kat Yow" “G6 Favaies Hep 


BOE 
li -20 D Ala & of ete 
> Bes! "over! Stop Refresh — Home Search Favoie: Hrstoay Channels Fudecteen Mad 
\JAddess [€)C iptech\Schedderim =] |trs 
Visual C+4 : = 









Prerequisites 


1 Intemmet and HTML 

e Should have used Window 
2 Visual Basic 

© Should have used Windows 


Visual C++ 





© Should have used Windows 


e Should have programmed in C++ 


: info@aptech.com 





- 


FC Diy toa Ra 





es Sa 4: 


Figure 22 
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This page has been intentionally left blank 
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pee ee 
OLTL GUIDE 
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ei 


pint 








SESSION 


. 2 
res 
i 
witha Swe bbe aah 24h 


TER re 
Ae 4 
aS . 





This OLTL session is dedicated to a project. 


1. Open the file, index.htm from C:\9905olt!\labdel\int&htmi\oltl- 
proj. It lists four hobbies. Refer Figure 1. The bullets here are 
pictures provided in a separcte file. 












a sd ecard Lederle internet a eral ve 
7 3 ROGET oe Sennen 
SSAA Se an ex , ERs en 





My E Hobbies 


® Stamps @ Food 
@ Cars @ music 





Figure 1 


We have created a link for the Car hobby. Clicking on this word, 
moves us to the page cars.htm which displays our favourite 
cars. Clicking on the name of the car scrolls us to the picture of 
the car in the same page. Refer Figure 2. 
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My Dream Cars 


ee 








Here are some cars I would love to have 
' 
. 
@ vn che Boxster : 
@ teevceaes Benz SLE b 
} 
Porsche Boxster y 
I, 
TT, ee PS oe tte 
SS a A Ine ra RE) lat eohy ere 
& 


Figure 2 


2. Create three other pages for the other hobbies each. The hobbies 
mentioned in index.htm are suggestions. Use any hobbies that 
you wish. Create links to these pages from index.htm. 


3. Also create a page about yourself and link it to About Me on 
index.htm. 


All required pictures have been provided. 
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_ Appendix - Internet and Web Page Designing 








TA 


<A> A> Creating links and bookmarks py a<huyws7 
<APPLET> ... </APPLET> Placing a Java applet in the Web page 
<B>... <B> Formats the text to bold 


<BODY> ... </BODY> The text between these tags forms the main body 
of the HTML page 


<CAPTION> ... </CAPTION> Defines text that is to be used as caption for the 
table 


<CENTER> ... </CENTER> 
<EM> ... </EM> Italicizes the text. Same effect as <I> ... </I> 


<HEAD> ... <HEAD> All information that forms the header of the HTML 
page is placed here 


<HR> Places a horizontal line in the page 


<HTML> ... </HTML> Defines the start and end of the HTML page 


> 
rj | @ 
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[mCP 
Formats the text to italics 











<IMG> Places an image in the Web page 





Place a marquee in the page. Can be used only 


<MARQUEEsS ... </MARQUEE> 
with Internet Explorer 
<OL> ... </OL> Used to create a numbered list 


<PARAM> Used with the tag <APPLET> to define the applet's 
parameters 
<STRONG> ... <«/STRONG> Formats the text to bold. Same effect as <B>... 
</B> 
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__ INTRODUCTION TO ) THE MODULE 





JY he module Logic building with C is intended for students who do not have any 
experience in programming. Before learning any computer language it is necessary to have 
sound knowledge of the concepts involved and the different ways of tackling a problem. 


We have attempted to make the material presented comprehensive, concise and practical. 
Confidence and competency in programming are the result of rigorous practice. The more 
programs we write, the sooner we progress to greater heights. 


This module is divided into six chapters. Each chapter introduces a new feature of 
programming as well as guidelines to be followed along with algorithm development. 
Throughout the module we emphasise on program readability because we believe that 
programs should be easily read and understood either by the person who writes it or by 


somebody else. 

We use the programming language C to implement the techniques learnt in this module. 
This language !s attracting considerable attention worldwide because the software industry 
is adopting the language to great advantage. Programs written in C are fast and efficient. 
This versatality makes C a desirable language. 


Good luck and hope you enjoy the course. 


Design Team, H.O. New Jersey USA 
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